/* GLOBESCAN INTELLIGENCE SYSTEM - MAIN CSS */
/*
 * Design-System: Network Tracker Design
 * - Background: GitHub-Style Dark Mode (#0d1117)
 * - Colors: Black, Gray, White + Red/Yellow for warnings
 * - Text: #ffffff (Primary), #8b949e (Secondary), #6e7681 (Tertiary)
 * - Cards: No Glass-Morphism, border-radius 6px, no shadows in dark mode
 * - Animationen: GPU-beschleunigt mit will-change
 *
 * Struktur:
 * 1. Base Styles (Body, HTML)
 * 2. Layout (Sidebar, Main Content)
 * 3. Components (Cards, Badges, Buttons)
 * 4. Pages (Dashboard, News, Review, Analytics, Tables, Admin)
 * 5. Animations (@keyframes)
 * 6. Media Queries (Responsive)
 */

/* BASE STYLES - Body & HTML - Network Tracker Design */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-family-ios, 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--gh-bg-primary);
    background-attachment: fixed;
    overflow-x: hidden;
    overflow-y: auto;
    letter-spacing: -0.02em;
    color: var(--gh-text-primary);
    font-size: var(--font-size-body, 17px);
    line-height: 22px;
    min-height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: var(--letter-spacing-tight, -0.02em);
    font-family: var(--font-family-ios, 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif);
}

h1 {
    font-size: var(--font-size-large-title, 34px);
    line-height: var(--line-height-tight, 1.2);
    font-weight: var(--font-weight-bold, 700);
}

h2 {
    font-size: var(--font-size-title-1, 28px);
    line-height: var(--line-height-tight, 1.2);
    font-weight: var(--font-weight-bold, 700);
}

h3 {
    font-size: var(--font-size-title-2, 22px);
    line-height: var(--line-height-tight, 1.2);
    font-weight: var(--font-weight-semibold, 600);
}

h4 {
    font-size: var(--font-size-title-3, 20px);
    line-height: var(--line-height-tight, 1.25);
    font-weight: var(--font-weight-semibold, 600);
}

.metric-value {
    font-weight: var(--font-weight-extrabold, 800);
    font-variant-numeric: tabular-nums;
    line-height: var(--line-height-tight, 1.2);
    letter-spacing: var(--letter-spacing-tight, -0.02em);
}

/* GITHUB CARD SYSTEM - Network Tracker Design */

/* GitHub Projects Style - Cards */
/* .gitHub-card Styles wurden nach liquid-glass.css verschoben */

/* GitHub Card Variants */
.gitHub-card.critical {
    border-color: var(--border-red);
}

.gitHub-card.critical:hover {
    border-color: var(--border-red);
    box-shadow: var(--glow-red);
}

.gitHub-card.warning {
    border-color: var(--border-yellow);
}

.gitHub-card.warning:hover {
    border-color: var(--border-yellow);
    box-shadow: var(--glow-yellow);
}

/* Legacy: dark-glass wird durch gitHub-card ersetzt - Kompatibilität */
.dark-glass {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.dark-glass:hover {
    border-color: var(--gh-border-hover);
    background: var(--gh-bg-tertiary);
}

.dark-glass.critical {
    border-color: var(--border-red);
}

.dark-glass.critical:hover {
    border-color: var(--border-red);
    box-shadow: var(--glow-red);
}

.dark-glass.warning {
    border-color: var(--border-yellow);
}

.dark-glass.warning:hover {
    border-color: var(--border-yellow);
    box-shadow: var(--glow-yellow);
}

/* Legacy: professional-glass wird durch gitHub-card ersetzt */
.professional-glass {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.professional-glass:hover {
    border-color: var(--gh-border-hover);
    background: var(--gh-bg-tertiary);
}

/* Professional Hover Effects */
.hover-lift {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Glossy Mouseover Effect */
.glossy-hover {
    position: relative;
    overflow: hidden;
}

.glossy-hover::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.glossy-hover:hover::before {
    opacity: 1;
}

/* SCROLLBAR STYLING - GitHub Style */

/* Smooth Scrollbar - GitHub Style */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gh-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--gh-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gh-border-hover);
}

.dark ::-webkit-scrollbar-track {
    background: var(--gh-bg-primary);
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--gh-border);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--gh-border-hover);
}

/* GLOW EFFECTS - Nur für Warnungen */

/* Professional Accent Glows - Nur für kritische Warnungen */
.red-glow {
    box-shadow:
        0 0 15px rgba(239, 68, 68, 0.2),
        0 0 30px rgba(239, 68, 68, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

.red-glow-strong {
    box-shadow:
        0 0 25px rgba(239, 68, 68, 0.3),
        0 0 50px rgba(239, 68, 68, 0.2),
        0 12px 48px rgba(0, 0, 0, 0.6);
}

.yellow-glow {
    box-shadow:
        0 0 10px rgba(251, 191, 36, 0.2),
        0 0 20px rgba(251, 191, 36, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Progress Bar for Loading Buttons - Subtle & Behind Text */
.time-tab,
.tab-btn {
    position: relative;
    overflow: hidden;
}

.time-tab.loading,
.tab-btn.loading {
    pointer-events: none;
}

.time-tab.loading::before,
.tab-btn.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: var(--progress, 0%);
    background: var(--gh-bg-tertiary);
    transition: width 0.2s ease, background 0.3s ease;
    z-index: -1;
}

/* ENTFERNT: Diese Regel wurde durch .time-tab.active (Zeile 4108) ersetzt
   um konsistente Styles mit grünem Border und grünem Text zu haben */
.header-action-btn.active {
    background: var(--gh-bg-tertiary);
    border-color: var(--gh-border-hover);
    color: var(--gh-text-primary);
    box-shadow: none;
}

.time-tab:hover,
.header-action-btn:hover {
    background: var(--gh-bg-secondary);
    border-color: var(--gh-border-hover);
    color: var(--gh-text-primary);
}

.time-tab.success {
    background: var(--gh-bg-tertiary);
    border-color: var(--gh-border-hover);
    color: var(--gh-text-primary);
    animation: successPulse 0.5s ease;
}

@keyframes successPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.time-tab.error {
    background: var(--accent-orange-15);
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* Recent Intel Items - GitHub Card Style */
.intel-item {
    background: rgba(28, 28, 30, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-left: 2px solid rgba(139, 92, 246, 0.3);
    padding: 16px 20px;
    margin-bottom: 12px;
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    animation: slideInLeft 0.5s ease;
    position: relative;
    min-height: auto;
}

.intel-item:hover {
    border-color: rgba(255, 255, 255, 0.05);
    border-left-color: rgba(139, 92, 246, 0.6);
    background: rgba(28, 28, 30, 0.08);
    transform: translateX(2px);
}

.dark .intel-item {
    background: rgba(28, 28, 30, 0.04);
    border-color: rgba(255, 255, 255, 0.02);
    border-left-color: rgba(139, 92, 246, 0.3);
}

.dark .intel-item:hover {
    background: rgba(35, 35, 40, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
    border-left-color: rgba(139, 92, 246, 0.6);
}

.intel-company {
    color: var(--gh-text-primary);
    font-weight: 600;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.intel-metadata {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    font-size: 0.9em;
    margin-left: 12px;
    opacity: 0.8;
    text-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
}

.intel-quick-view-header {
    margin-bottom: 20px;
}

.intel-quick-view-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.intel-quick-view-metadata {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    font-size: 0.85em;
    opacity: 0.8;
    text-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
}

.intel-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.7em;
    font-weight: 600;
    margin-right: 5px;
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    border: 1px solid var(--gh-border);
}

.intel-description {
    color: var(--gh-text-secondary);
    font-size: 0.85em;
    margin: 10px 0;
    line-height: 1.4;
}

.intel-time {
    color: var(--gh-text-tertiary);
    font-size: 0.75em;
    margin-top: 8px;
}

/* Top Sources */
.source-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    color: var(--gh-text-secondary);
}

.source-name {
    font-size: 0.9em;
}

.source-count {
    background: var(--gh-bg-tertiary);
    padding: 3px 10px;
    border-radius: 6px;
    color: var(--gh-text-primary);
    font-weight: 600;
    font-size: 0.85em;
    border: 1px solid var(--gh-border);
}

/* Enhanced Top Sources Design */
.source-item-enhanced {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.source-item-enhanced:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(40, 167, 69, 0.3);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.1);
}

.source-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.source-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(40, 167, 69, 0.1);
    border-radius: 8px;
    flex-shrink: 0;
}

.source-icon {
    width: 16px;
    height: 16px;
    color: rgba(40, 167, 69, 0.9);
}

.source-rank {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.9), rgba(16, 185, 129, 0.9));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: white;
    border: 2px solid var(--gh-bg-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.source-name-enhanced {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--gh-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.source-count-enhanced {
    font-size: 16px;
    font-weight: 700;
    color: var(--ios-blue-primary, #28A745);
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: right;
}

.source-bar-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.source-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.4);
    position: relative;
}

.source-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.source-empty {
    text-align: center;
    padding: 20px;
    color: var(--gh-text-secondary);
    font-size: 0.9em;
    opacity: 0.6;
}

/* News Section - Verwendet jetzt Dashboard Grid-Layout (.main-content) */
/* Alte Styles entfernt - News verwendet jetzt:
   - .hero-section (wie Dashboard)
   - .main-content (Grid: 70% News / 30% Sidebar)
   - .recent-intel (News-Liste)
   - .key-metrics (Analytics Sidebar)
*/

.analytics-sidebar::-webkit-scrollbar {
    width: 6px;
}

.analytics-sidebar::-webkit-scrollbar-track {
    background: var(--bg-overlay-30);
    border-radius: 3px;
}

.analytics-sidebar::-webkit-scrollbar-thumb {
    background: var(--gh-border);
    border-radius: 3px;
}

.analytics-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--gh-border-hover);
}

/* Badge Base Styles - iOS Lock Screen Notification Style (Dark, Minimal, High-Quality) */
.analytics-badge,
.liquid-glass .analytics-badge {
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 22px 24px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    position: relative;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Glossy edge effect - subtle white gradient on top half */
.analytics-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.06) 30%,
            rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 14px 14px 0 0;
}

.analytics-badge:hover {
    background: rgba(0, 0, 0, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.analytics-badge.focused {
    background: rgba(0, 0, 0, 1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.dark .analytics-badge,
.dark.liquid-glass .analytics-badge {
    background: rgba(0, 0, 0, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .analytics-badge:hover,
.dark.liquid-glass .analytics-badge:hover {
    background: rgba(0, 0, 0, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.badge-title {
    font-size: 0.7em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
    text-transform: none;
    letter-spacing: 0.3px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    position: relative;
    z-index: 2;
}

.badge-value {
    font-size: 2.5em;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    margin: 10px 0;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    letter-spacing: -0.5px;
    line-height: 1.1;
    position: relative;
    z-index: 2;
}

.badge-label {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    position: relative;
    z-index: 2;
    /* Text-Truncation für lange Übersetzungen (MANDATORY) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.badge-metric {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
    margin-top: 14px;
    position: relative;
    z-index: 2;
}

.badge-metric-label {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.6);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    font-weight: 400;
}

.badge-metric-value {
    font-size: 0.75em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
}

/* Intelligence Score Badge - iOS Lock Screen Notification Style */
.intelligence-score-big {
    text-align: center;
    padding: 22px 0;
    position: relative;
    z-index: 2;
}

.intelligence-value {
    font-size: 4.2em;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 1;
    margin: 12px 0;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    letter-spacing: -1.5px;
}

.intelligence-rating {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: none;
    letter-spacing: 0.5px;
    margin: 12px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    font-weight: 400;
}

.intelligence-breakdown {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}

.intelligence-sub {
    text-align: center;
}

.intelligence-sub-value {
    font-size: 1.9em;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    letter-spacing: -0.5px;
}

.intelligence-sub-label {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: none;
    margin-top: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    font-weight: 400;
}

/* Badge Metrics - Duplicate removed, using styles above */

/* Badge Animations */
@keyframes badgeFocus {

    0%,
    100% {
        transform: scale(1);
        box-shadow: var(--gh-card-shadow-light, none);
    }

    50% {
        transform: scale(1.05);
        box-shadow: var(--gh-card-shadow-hover, none);
    }
}

@keyframes counterRoll {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: var(--glow-subtle);
    }

    50% {
        box-shadow: var(--glow-subtle);
    }
}

@keyframes expandBar {
    from {
        width: 0%;
    }

    to {
        width: var(--target-width);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* Badge Progress Bars */
.badge-bar {
    width: 100%;
    height: 8px;
    background: var(--gh-bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.badge-bar-fill {
    height: 100%;
    background: var(--gh-border);
    border-radius: 4px;
    transition: width 1s ease-out;
    will-change: width;
    transform: translateZ(0);
}

/* Intelligence Score Badge */
.intelligence-score-big {
    text-align: center;
    padding: 30px 20px;
}

.intelligence-value {
    font-size: 4em;
    font-weight: 900;
    color: var(--gh-text-primary);
    font-family: 'Montserrat', sans-serif;
    animation: counterRoll 1s ease-out;
}

.intelligence-rating {
    font-size: 1.2em;
    color: var(--gh-text-secondary);
    margin-top: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.intelligence-breakdown {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--gh-border);
}

.intelligence-sub {
    text-align: center;
}

.intelligence-sub-value {
    font-size: 1.5em;
    color: var(--gh-text-primary);
    font-weight: 700;
}

.intelligence-sub-label {
    font-size: 0.7em;
    color: var(--text-white-50);
    margin-top: 5px;
}

/* Responsive */
@media (max-width: 1400px) {
    .news-analytics-wrapper {
        flex-direction: column;
    }

    .news-main-section,
    .analytics-sidebar {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .analytics-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

.news-header {
    text-align: center;
    padding: 16px;
    border-bottom: 1px solid var(--gh-border);
    margin-bottom: 20px;
}

.news-controls {
    height: 20px;
}

#news-load-more {
    margin-top: 30px;
    display: none;
}

.news-footer {
    padding: 20px;
    border-top: 1px solid var(--gh-border);
}

.news-title {
    font-size: 1.8em;
    color: var(--gh-text-primary);
    margin-bottom: 5px;
    font-family: var(--font-family-ios, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif);
    font-weight: 700;
}

.news-subtitle {
    color: var(--gh-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.75em;
    margin-bottom: 15px;
}

.news-date {
    color: var(--gh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85em;
    margin-top: 10px;
    text-align: center;
}

.news-section {
    margin-bottom: var(--section-spacing);
}

.news-section-title {
    font-size: var(--font-size-callout);
    color: var(--gh-text-primary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gh-border);
    font-weight: 600;
}

/* News Cards - Liquid Glass Design (wie Dashboard intel-item) */
.highlight-card {
    background: rgba(28, 28, 30, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--ios-blue-primary);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 16px 20px;
    margin-bottom: 12px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--lg-shadow-combined);
    overflow: hidden;
}

.highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.03) 20%,
            transparent 40%);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
    z-index: 1;
}

.highlight-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: var(--lg-layer-overlay);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
    z-index: 0;
}

.highlight-card>* {
    position: relative;
    z-index: 2;
}

.highlight-card:hover {
    border-color: var(--ios-blue-primary);
    background: rgba(35, 35, 40, 0.75);
    box-shadow: var(--lg-shadow-hover-combined);
    transform: translateY(-2px) scale(1.01);
}

.dark .highlight-card {
    background: rgba(28, 28, 30, 0.06);
    border-color: rgba(255, 255, 255, 0.02);
}

.dark .highlight-card:hover {
    background: rgba(35, 35, 40, 0.75);
    border-color: var(--ios-blue-primary);
}

.rank-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 32px;
    height: 32px;
    background: var(--gh-bg-tertiary);
    border: 1px solid var(--gh-border);
    color: var(--gh-text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85em;
    z-index: 10;
    box-shadow: var(--gh-card-shadow-light, none);
}

.news-item-title {
    font-size: 1.1em;
    color: var(--gh-text-primary);
    margin-bottom: 8px;
    padding-right: 50px;
    font-weight: 600;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.news-item-metadata {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    font-size: 0.85em;
    opacity: 0.8;
    text-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
}

.news-item-meta {
    color: var(--gh-text-tertiary);
    font-size: 0.8em;
    margin-bottom: 8px;
}

.news-item-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    font-size: 0.75em;
    margin-right: 8px;
    margin-bottom: 8px;
}

.news-item-description {
    color: var(--gh-text-secondary);
    line-height: 1.5;
    margin-top: 8px;
    font-size: 0.85em;
}

/* News List Items - Liquid Glass Design (wie highlight-card) */
.news-list-item {
    background: rgba(28, 28, 30, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--ios-blue-primary);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: 18px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    box-shadow: var(--lg-shadow-combined);
    overflow: hidden;
}

.news-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.03) 20%,
            transparent 40%);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
    z-index: 1;
}

.news-list-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: var(--lg-layer-overlay);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
    z-index: 0;
}

.news-list-item>* {
    position: relative;
    z-index: 2;
}

.news-list-item:hover {
    border-color: var(--ios-blue-primary);
    background: rgba(35, 35, 40, 0.75);
    box-shadow: var(--lg-shadow-hover-combined);
    transform: translateY(-2px) scale(1.01);
}

.dark .news-list-item {
    background: rgba(28, 28, 30, 0.06);
    border-color: rgba(255, 255, 255, 0.02);
}

.dark .news-list-item:hover {
    background: rgba(35, 35, 40, 0.75);
    border-color: var(--ios-blue-primary);
}

.compact-news-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dotted var(--gh-border);
    transition: all 0.3s ease;
    cursor: pointer;
}

.compact-news-item:hover {
    background: var(--gh-bg-secondary);
    padding-left: 10px;
}

.compact-rank {
    color: var(--gh-text-primary);
    min-width: 35px;
    font-weight: bold;
}

.compact-title {
    flex: 1;
    color: var(--gh-text-secondary);
}

.compact-category {
    color: var(--gh-text-tertiary);
    font-size: 0.85em;
    margin: 0 15px;
}

.compact-score {
    color: var(--gh-text-secondary);
    font-size: 0.85em;
}

/* Review Section */
.finding-item {
    background: rgba(28, 28, 30, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.finding-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
}

.finding-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(28, 28, 30, 0.12);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.dark .finding-item {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.16);
}

.dark .finding-item:hover {
    background: rgba(28, 28, 30, 0.18);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.24);
}

.finding-timestamp {
    color: var(--gh-text-tertiary);
    font-size: 0.75em;
    margin-bottom: 12px;
    font-style: italic;
}

.finding-company {
    color: var(--gh-text-primary);
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 8px;
}

.finding-meta {
    color: var(--gh-text-tertiary);
    font-size: 0.8em;
    margin-bottom: 8px;
}

.finding-score {
    text-align: center;
    min-width: 80px;
}

.score-label {
    color: var(--gh-text-secondary);
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.score-value {
    font-size: 2em;
    font-weight: 700;
    color: var(--gh-text-primary);
}

.discrepancy-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--gh-border);
}

.discrepancy-label {
    color: var(--gh-text-secondary);
    font-size: 0.8em;
    margin-bottom: 5px;
}

.discrepancy-value {
    color: var(--gh-text-primary);
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 8px;
}

.discrepancy-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
    display: inline-block;
}

.discrepancy-badge.discrepancy-low {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    border: 1px solid var(--gh-border);
}

.discrepancy-badge.discrepancy-medium {
    background: var(--accent-yellow-20);
    color: var(--accent-yellow);
    border: 1px solid var(--accent-yellow-20);
}

.discrepancy-badge.discrepancy-high {
    background: var(--accent-orange-20);
    color: var(--accent-orange);
    border: 1px solid var(--accent-orange-20);
}

.discrepancy-diff {
    opacity: 0.8;
    font-size: 0.9em;
    margin-left: 5px;
}

.meta-badge {
    display: inline-block;
    padding: 3px 8px;
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    font-size: 0.7em;
    font-weight: 600;
    margin-right: 5px;
    margin-bottom: 0;
}

.finding-description {
    color: var(--gh-text-secondary);
    font-size: 0.85em;
    line-height: 1.5;
    margin: 10px 0;
    /* Konsistent mit .intel-description und .news-item-description */
    /* Kein Hintergrund, kein Padding, keine Box - nur Text */
}

.rating-section {
    margin-top: 12px;
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rating-section>div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.rating-section .action-buttons {
    margin-left: auto;
    margin-top: 0;
}

.rating-label {
    color: var(--gh-text-secondary);
    font-size: 0.8em;
    font-weight: 500;
    margin-right: 4px;
}

.star-rating {
    display: flex;
    gap: 4px;
    align-items: center;
}

.star {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
}

.star:hover {
    color: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
}

.star.active {
    color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.action-buttons {
    display: flex;
    gap: 8px;
    margin-left: auto;
    margin-top: 12px;
    justify-content: flex-end;
    align-items: center;
}

/* ========================================
   ZENTRALE BUTTON-KLASSE - Liquid Glass Design
   ========================================
   Diese Klasse wird überall verwendet für konsistente Buttons.
   Änderungen hier wirken sich auf alle Buttons aus.
   ======================================== */
.btn {
    padding: 6px 12px;
    border-radius: 16px;
    /* Konsistent mit Design Rules */
    font-size: 0.75em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(28, 28, 30, 0.4);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    color: var(--gh-text-primary);
    position: relative;
    overflow: hidden;
    text-align: center;
    display: inline-block;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    pointer-events: none;
}

.btn:hover {
    background: rgba(35, 35, 40, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
}

/* Button Varianten */
.btn-tab {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gh-text-secondary);
}

.btn-tab:hover {
    color: var(--gh-text-primary);
}

.btn-tab.active {
    background: var(--gh-bg-tertiary);
    border-color: var(--gh-border);
    color: var(--gh-text-primary);
    box-shadow: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   BUTTON LOADING STATE - Ladebalken
   ========================================
   Aktiviert mit: button.classList.add('loading')
   Progress setzen: button.style.setProperty('--progress', '50%')
   ======================================== */
.btn.loading {
    pointer-events: none;
    cursor: wait;
    position: relative;
}

/* Ladebalken - Hintergrund (unsichtbar bis aktiv) */
.btn.loading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: var(--progress, 0%);
    background: linear-gradient(90deg,
            rgba(40, 167, 69, 0.8) 0%,
            rgba(40, 167, 69, 1) 50%,
            rgba(40, 167, 69, 0.8) 100%);
    border-radius: 0 0 16px 16px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}

/* Pulsierender Effekt während des Ladens */
.btn.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            transparent,
            rgba(40, 167, 69, 0.1),
            transparent);
    background-size: 200% 100%;
    animation: btn-loading-shimmer 1.5s ease-in-out infinite;
    border-radius: 16px;
    pointer-events: none;
}

@keyframes btn-loading-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Success State nach dem Laden */
.btn.loading.success {
    animation: btn-success-pulse 0.5s ease;
}

@keyframes btn-success-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    }
}

/* Error State */
.btn.loading.error {
    animation: btn-error-shake 0.5s ease;
}

.btn.loading.error::after {
    background: linear-gradient(90deg,
            rgba(239, 68, 68, 0.8) 0%,
            rgba(239, 68, 68, 1) 50%,
            rgba(239, 68, 68, 0.8) 100%);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

@keyframes btn-error-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

/* Review Action Buttons - Neutral, Clean, Equal Size */
.btn-approve,
.btn-blacklist {
    background: rgba(139, 148, 158, 0.08);
    color: var(--gh-text-primary);
    border-color: rgba(139, 148, 158, 0.2);
    min-width: 120px;
    padding: 8px 16px;
    font-size: 0.8em;
    font-weight: 500;
}

.btn-approve:hover,
.btn-blacklist:hover {
    background: rgba(139, 148, 158, 0.12);
    border-color: rgba(139, 148, 158, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: var(--gh-text-primary);
}

.btn-approve:active,
.btn-blacklist:active {
    background: rgba(139, 148, 158, 0.15);
    transform: translateY(1px);
}

.reviewed-badge {
    display: inline-block;
    padding: 3px 8px;
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    font-size: 0.7em;
    font-weight: 600;
    margin-left: 5px;
}

.enrichment-badge {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    border: 1px solid var(--gh-border);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
}

.success-message {
    display: none;
    color: var(--gh-text-primary);
    font-size: 0.9em;
    font-weight: 600;
    margin-left: 15px;
}

.success-message.show {
    display: block;
}

.fade-out {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease;
}

.progress-section {
    background: var(--bg-overlay-50);
    border: 1px solid var(--gh-border);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 30px;
}

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

.progress-label {
    color: var(--gh-text-primary);
    font-weight: 600;
}

.progress-counter {
    color: var(--gh-text-secondary);
    font-size: 0.9em;
}

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

.progress-fill {
    height: 100%;
    background: var(--gh-bg-tertiary);
    border-radius: 4px;
    transition: width 0.5s ease;
    will-change: width;
    transform: translateZ(0);
}

/* Review Section: Main Content Grid (70% Findings / 30% Sidebar) */
#review-content .main-content {
    display: grid !important;
    grid-template-columns: 7fr 3fr !important;
    /* 70% Findings / 30% Sidebar */
    gap: 24px;
    align-items: start !important;
}

/* Review Section: Findings List (70% Breite) */
#review-content .recent-intel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    /* Gradient-Hintergrund: unten schwarz, nach oben leicht grau */
    background: linear-gradient(to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(13, 17, 23, 1) 25%,
            rgba(18, 23, 30, 1) 50%,
            rgba(22, 27, 34, 1) 75%,
            rgba(28, 28, 30, 0.3) 100%) !important;
    background-image: linear-gradient(to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(13, 17, 23, 1) 25%,
            rgba(18, 23, 30, 1) 50%,
            rgba(22, 27, 34, 1) 75%,
            rgba(28, 28, 30, 0.3) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 0;
    margin-top: 0 !important;
    transition: all 0.2s ease;
    align-self: start !important;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    position: relative;
}

/* Überschreibe .dark .recent-intel für Review-Section */
#review-content.dark .recent-intel,
.dark #review-content .recent-intel {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(13, 17, 23, 1) 25%,
            rgba(18, 23, 30, 1) 50%,
            rgba(22, 27, 34, 1) 75%,
            rgba(28, 28, 30, 0.3) 100%) !important;
    background-image: linear-gradient(to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(13, 17, 23, 1) 25%,
            rgba(18, 23, 30, 1) 50%,
            rgba(22, 27, 34, 1) 75%,
            rgba(28, 28, 30, 0.3) 100%) !important;
}

.findings-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* Review Section: Analytics Sidebar (30% Breite) */
#review-content .key-metrics {
    grid-column: 2 !important;
    grid-row: 1 !important;
    background: rgba(28, 28, 30, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 24px !important;
    margin-bottom: 0;
    margin-top: 0 !important;
    transition: all 0.2s ease;
    align-self: start !important;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    max-height: none;
    position: relative;
    top: auto;
}

/* Review Section: Responsive */
@media (max-width: 1200px) {
    #review-content .main-content {
        grid-template-columns: 1fr !important;
    }

    #review-content .key-metrics {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

/* Mobile Responsive Design für Review Progress Header */
@media (max-width: 768px) {
    .header-left-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .review-progress-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        width: 100%;
    }

    .review-progress-bar-container {
        width: 100%;
        min-width: 100%;
    }

    .review-progress-bar {
        width: 100%;
    }

    .review-kpi-container {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .review-kpi-text {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
}

.sort-wrapper {
    position: relative;
}

.sort-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-overlay-95);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    margin-top: 5px;
    min-width: 150px;
    z-index: 1000;
}


.sort-dropdown.show {
    display: block;
}

.sort-option {
    padding: 10px 15px;
    color: var(--gh-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.sort-option:hover {
    background: var(--gh-bg-secondary);
    color: var(--gh-text-primary);
}

.sort-option.active {
    color: var(--gh-text-primary);
    background: var(--gh-bg-tertiary);
}

.edit-notification {
    position: fixed;
    top: 100px;
    right: 20px;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 15px 20px;
    color: var(--gh-text-primary);
    font-weight: 600;
    z-index: 2000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    box-shadow: var(--gh-card-shadow-light, none);
}

.dark .edit-notification {
    box-shadow: none;
}

.edit-notification.show {
    transform: translateX(0);
}

.learning-badge-item {
    /* Liquid Glass Design - konsistent mit .finding-item */
    background: rgba(28, 28, 30, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 12px !important;
    /* KRITISCH: Kleinere Badge-Größe (12px statt 16px) */
    padding: 10px 12px !important;
    /* KRITISCH: Kompakteres Padding */
    width: 100%;
    /* WICHTIG: margin-bottom wird NICHT gesetzt - Position wird per JS via margin-top gesetzt */
    margin-bottom: 0;
    /* Höhe wird per JavaScript exakt auf Finding-Höhe gesetzt */
    height: 0;
    /* Wird per JS auf Finding-Höhe gesetzt */
    min-height: 0;
    max-height: none;
    opacity: 0;
    transform: translateY(-10px) scale(0.98) translateZ(0);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(255, 255, 255, 0.05) inset !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    /* KRITISCH: Kleinere Gap (8px statt 12px) */
    box-sizing: border-box;
    /* padding in height einrechnen */
    will-change: transform, opacity, height;
    backface-visibility: hidden;
}

.learning-badge-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    pointer-events: none;
}

.dark .learning-badge-item {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.05) inset;
    background: rgba(15, 15, 20, 0.6) !important;
}

.learning-badge-item.show {
    opacity: 1 !important;
    transform: translateY(0) scale(1);
    /* Stelle sicher, dass Liquid Glass Design auch im show-State erhalten bleibt */
    background: rgba(28, 28, 30, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.learning-badge-item:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(40, 40, 45, 0.5) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(255, 255, 255, 0.1) inset !important;
    transform: translateY(-1px);
}

.dark .learning-badge-item:hover {
    background: rgba(25, 25, 30, 0.7) !important;
}

.learning-badge-item .learning-icon {
    font-size: 18px;
    color: var(--accent-green);
    filter: drop-shadow(0 0 5px rgba(46, 204, 113, 0.4));
    margin-top: 2px;
    flex-shrink: 0;
}

.learning-badge-item .learning-text {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    font-size: 12px;
    /* KRITISCH: Kleinere Schrift (12px statt 13px) */
    line-height: 1.5;
    /* KRITISCH: Kompaktere Zeilenhöhe (1.5 statt 1.6) */
    letter-spacing: 0.01em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
    z-index: 1;
    flex: 1;
    /* Nimmt verfügbaren Platz ein */
    /* Höhe passt sich dynamisch an Inhalt an */
    height: auto;
    min-height: auto;
    max-height: none;
    /* Wird dynamisch per JavaScript gesetzt */
    overflow-y: hidden;
    /* Verstecke Überlauf - Text wird per JS gekürzt */
    overflow-x: hidden;
    display: block;
    text-overflow: ellipsis;
    /* Zeige "..." wenn Text gekürzt */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.learning-badge-item .loading-text {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* Progress bar container */
.learning-progress-container {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
    position: relative;
}

/* Progress bar animation */
.learning-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), #00ffcc);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: progress-bar-animation 1.5s ease-in-out infinite;
    width: 100%;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}

@keyframes progress-bar-animation {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Loading state for badge */
.learning-badge-item.loading {
    opacity: 0.8;
}

.learning-badge-item .checkmark-btn {
    background: rgba(46, 204, 113, 0.15);
    color: var(--accent-green);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 10px;
    padding: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.1);
}

.learning-badge-item .checkmark-btn:hover {
    background: rgba(46, 204, 113, 0.25);
    border-color: var(--accent-green);
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
    color: #fff;
}

.learning-badge-item .checkmark-btn:active {
    transform: scale(0.95);
    background: rgba(46, 204, 113, 0.3);
}

.learning-badge-item.loading .checkmark-btn {
    display: none;
}

.learning-badge-item.loading .thumbs-down-btn {
    display: none;
}

/* Custom scrollbar für Learning Badge Text */
.learning-badge-item .learning-text::-webkit-scrollbar {
    width: 4px;
}

.learning-badge-item .learning-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.learning-badge-item .learning-text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.learning-badge-item .learning-text::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.learning-badge-item .thumbs-down-btn {
    padding: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.learning-badge-item .thumbs-down-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
}

.last-learning-badge {
    /* Legacy - wird durch learning-badge-item ersetzt */
    display: none;
}

/* ============================================================================
   CODE DIFF VISUALISIERUNG
   ============================================================================ */

#code-diff-container {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    margin-top: 16px;
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

.diff-file {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.diff-file:last-child {
    border-bottom: none;
}

.diff-header {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.diff-header .filename {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: var(--gh-text-primary);
    font-weight: 500;
}

.diff-header .stats {
    font-size: 11px;
    color: var(--gh-text-tertiary);
}

.diff-header .stats::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    margin-right: 4px;
}

.diff-content {
    padding: 16px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 11px;
    line-height: 1.6;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.2);
    color: var(--gh-text-secondary);
    white-space: pre;
    margin: 0;
}

.diff-line-add {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    display: block;
}

.diff-line-del {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    display: block;
}

/* ============================================================================
   COPILOT OUTPUT ANZEIGE
   ============================================================================ */

#copilot-output-container {
    display: none;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    margin-top: 16px;
    padding: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.copilot-output-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
}

.copilot-output-item:last-child {
    margin-bottom: 0;
}

.copilot-output-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}

.copilot-output-header .copilot-icon {
    font-size: 16px;
}

.copilot-output-header .copilot-label {
    color: var(--accent-purple);
    font-weight: 600;
}

.copilot-output-header .copilot-time {
    color: var(--gh-text-tertiary);
    margin-left: auto;
    font-size: 10px;
}

.copilot-output-body {
    font-size: 12px;
    line-height: 1.6;
    color: var(--gh-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================================================
   VIEWER COUNT
   ============================================================================ */

#ticket-dev-viewers {
    display: none;
    font-size: 11px;
    color: var(--gh-text-tertiary);
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-left: 8px;
}

#ticket-dev-viewers::before {
    content: '👁️ ';
}

/* Shiny overlay effect */
.last-learning-badge::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 70%);
    animation: shine 3s infinite;
    pointer-events: none;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

@keyframes unicorn-rainbow {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

.unicorn-animation {
    position: fixed;
    font-size: 48px;
    animation: unicorn-rainbow 2s ease-out;
    z-index: 10000;
    pointer-events: none;
    user-select: none;
}

.last-learning-badge.show {
    opacity: 1;
    transform: translateY(0);
}

.last-learning-badge .learning-icon {
    font-size: 24px;
    float: left;
    margin-right: 12px;
    animation: pulseOpacity 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(138, 43, 226, 0.5));
}

.last-learning-badge .learning-text {
    color: var(--gh-text-primary);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
    /* Verbesserte Lesbarkeit für Claude Feedback */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Master Learning Badge - GitHub Card Style */
.master-learning-badge {
    /* Höhe passt sich dynamisch an Inhalt an */
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 20px;
    width: 100%;
    min-height: auto;
    /* Passt sich an Inhalt an */
    height: auto;
    /* Flexibles Layout für längeren Text */
    opacity: 0;
    transform: translateY(-20px) scale(0.9) translateZ(0);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--gh-card-shadow-light, none);
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.dark .master-learning-badge {
    box-shadow: none;
}

.master-learning-badge:hover {
    border-color: var(--gh-border-hover);
    background: var(--gh-bg-tertiary);
    box-shadow: var(--gh-card-shadow-hover, none);
}

.dark .master-learning-badge:hover {
    background: #1c2128;
    box-shadow: none;
}


.master-learning-badge.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.master-learning-badge .master-icon {
    font-size: 24px;
    float: left;
    margin-right: 12px;
    animation: pulseOpacity 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.master-learning-badge .master-learning-text {
    color: var(--gh-text-primary);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 15px;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(0, 255, 170, 0.2);
    position: relative;
    z-index: 1;
    /* Verbesserte Lesbarkeit */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Text-Bereich passt sich dynamisch an Inhalt an */
    height: auto;
    min-height: auto;
    max-height: none;
    /* Keine Max-Höhe - passt sich an Inhalt an */
    overflow-y: visible;
    /* Kein Scroll - volle Anzeige */
    overflow-x: hidden;
    flex: 1;
    /* Nimmt verfügbaren Platz im Flex-Container ein */
}

/* Custom scrollbar für Master-Learning Text */
.master-learning-badge .master-learning-text::-webkit-scrollbar {
    width: 8px;
}

.master-learning-badge .master-learning-text::-webkit-scrollbar-track {
    background: var(--gh-bg-secondary);
    border-radius: 4px;
}

.master-learning-badge .master-learning-text::-webkit-scrollbar-thumb {
    background: var(--gh-bg-tertiary);
    border-radius: 4px;
}

.master-learning-badge .master-learning-text::-webkit-scrollbar-thumb:hover {
    background: var(--gh-bg-tertiary);
}

.master-learning-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.btn-thumbs-up-master {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    text-align: center;
    flex: 1;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-thumbs-up-master:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

.btn-thumbs-up-master:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-thumbs-up-master:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-thumbs-down-master {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    text-align: center;
    flex: 1;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-thumbs-down-master:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

.btn-thumbs-down-master:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px var(--accent-orange-20);
}

.btn-thumbs-down-master:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-apply-master {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.btn-apply-master:hover {
    background: var(--gh-bg-tertiary);
    transform: translateY(-2px);
    box-shadow: none;
    border-color: var(--gh-border);
}

.btn-apply-master:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-apply-master:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-dismiss-master {
    background: transparent;
    color: var(--gh-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.btn-dismiss-master:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--gh-text-secondary);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-dismiss-master:active {
    background: rgba(255, 255, 255, 0.08);
}

.modal-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999 !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dark .modal-overlay {
    background: rgba(13, 17, 23, 0.8);
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9) translateY(-20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    box-shadow: var(--gh-card-shadow-light, none);
}

.dark .modal-content {
    box-shadow: none;
}

.modal-overlay.show .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal-title {
    color: var(--gh-text-primary);
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
}

.modal-description {
    color: var(--gh-text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.feedback-textarea {
    width: 100%;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    padding: 15px;
    color: var(--gh-text-primary)fff;
    font-family: inherit;
    font-size: 0.95em;
    line-height: 1.6;
    resize: vertical;
    min-height: 120px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.feedback-textarea::placeholder {
    color: var(--gh-text-secondary);
    opacity: 0.8;
}

.feedback-textarea:focus {
    outline: none;
    border-color: var(--gh-border);
    background: var(--gh-bg-tertiary);
    box-shadow: none;
    transform: scale(1.01);
    transition: all 0.3s ease;
}

.char-counter {
    color: var(--gh-text-secondary);
    font-size: 0.85em;
    text-align: right;
    margin-top: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.modal-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-cancel {
    flex: 1;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--gh-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--gh-text-primary);
}

.btn-submit {
    flex: 2;
    padding: 12px;
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover:not(:disabled) {
    background: var(--gh-bg-tertiary);
    border-color: var(--gh-border);
}

.btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Analytics Section - Konzentrations-Tracker Design */
.perf-card {
    background: rgba(13, 17, 23, 0.95);
    border: 1px solid rgba(48, 54, 61, 0.8);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: all 0.2s ease;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
    min-height: 280px;
    max-height: 360px;
}

.perf-card * {
    box-sizing: border-box;
}

.perf-card .glass-metrics,
.perf-card .glass-metric {
    overflow: visible;
}

.perf-card .glass-label {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Content über Pseudo-Elementen */
.perf-card>* {
    position: relative;
    z-index: 2;
}

/* Lichtreflexionen oben (::before) - Premium Shine */
.perf-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.02) 40%,
            transparent 100%);
    border-radius: var(--lg-border-radius);
    pointer-events: none;
    z-index: 1;
}

/* Glass-Layer Overlay (::after) - removed for cleaner look, or use for texture */
.perf-card::after {
    display: none;
}

.perf-card:hover {
    background: rgba(13, 17, 23, 1);
    border-color: rgba(48, 54, 61, 1);
    transform: translateY(-2px);
}

/* Dark mode - same as default */

.perf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0;
    min-height: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.perf-title {
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.perf-content {
    font-size: 0.95em;
    color: var(--gh-text-primary);
    line-height: 1.5;
}

.perf-card .card-footer-text {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
    margin-top: auto;
    padding-top: 0;
    border-top: none;
    text-align: left;
}

/* Analytics Card Value (große Zahl) */
.perf-value {
    font-size: 3em;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-align: center;
    margin: 8px 0;
}

/* Analytics Card Label */
.perf-label {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: 12px;
}

/* Mini Chart Container - Konzentrations-Tracker Style */
.mini-chart {
    width: 100%;
    height: 60px;
    position: relative;
    margin: 12px 0 8px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 4px;
    box-sizing: border-box;
}

.mini-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Smooth lines for scientific look */
.mini-chart polyline {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.perf-badge {
    padding: 6px 12px !important;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 20px !important;
    /* Pill shape */
    font-size: 0.75em !important;
    color: #34D399 !important;
    /* Brighter green text */
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.1);
}

.card-footer-text {
    position: absolute;
    bottom: 4px;
    left: 16px;
    right: 16px;
    font-size: 0.6em;
    color: var(--gh-text-tertiary);
    text-align: center;
    line-height: 1.2;
    min-height: 28px;
    padding-top: 6px;
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cost-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin: 3px 0;
}

.flow-node {
    text-align: center;
    position: relative;
    padding: 2px;
    background: var(--gh-bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--gh-border);
    font-size: 0.7em;
}

.flow-arrow {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background: var(--gh-border);
}

.flow-arrow::after {
    content: '→';
    position: absolute;
    right: -10px;
    top: -9px;
    color: var(--gh-text-secondary);
    font-size: 1.2em;
}

.ring-container {
    display: flex;
    justify-content: space-around;
    gap: 6px;
    margin: 4px 0;
}

.ring-stat {
    position: relative;
    width: 65px;
    height: 65px;
}

.ring-svg {
    width: 65px;
    height: 65px;
}

.ring-bg {
    fill: none;
    stroke: var(--gh-border);
    stroke-width: 5;
}

.ring-progress {
    fill: none;
    stroke: url(#ringGradient);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 176;
    stroke-dashoffset: 176;
    transform-origin: center;
    transition: stroke-dashoffset 1.5s ease-out;
    will-change: stroke-dashoffset;
}

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

.ring-value {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--gh-text-primary);
}

.ring-label {
    color: var(--gh-text-secondary);
    font-size: 0.7em;
    text-transform: uppercase;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 200px;
    padding: 10px 0;
}

.chart-bar {
    flex: 1;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.8) 0%, rgba(16, 185, 129, 0.5) 100%);
    border-radius: 3px 3px 0 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    will-change: height, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.chart-bar:hover {
    background: linear-gradient(180deg, rgba(16, 185, 129, 1) 0%, rgba(16, 185, 129, 0.7) 100%);
    transform: scaleY(1.05);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.enrichment-bar {
    width: 100%;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.8) 0%, rgba(139, 92, 246, 0.5) 100%);
    border-radius: 2px 2px 0 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
    cursor: pointer;
}

.enrichment-bar:hover {
    background: linear-gradient(180deg, rgba(139, 92, 246, 1) 0%, rgba(139, 92, 246, 0.7) 100%);
    transform: scaleY(1.05);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

.source-row {
    margin-bottom: 15px;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.source-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: var(--gh-bg-tertiary);
    border-radius: 12px;
    transition: width 0.6s ease;
    will-change: width;
    transform: translateZ(0);
}

.quality-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    opacity: 0;
    transition: width 0.6s ease, opacity 0.6s ease;
    will-change: width, opacity;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.category-card {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.category-card:hover {
    background: var(--gh-bg-secondary);
    transform: scale(1.05);
}

.category-count {
    font-size: 2em;
    font-weight: 700;
    color: var(--gh-text-primary);
}

.category-name {
    color: var(--gh-text-secondary);
    font-size: 0.85em;
    margin-top: 5px;
}

.region-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.summary-card {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 15px;
    text-align: center;
}

.summary-label {
    color: var(--gh-text-secondary);
    font-size: 0.75em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.summary-value {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--gh-text-primary);
    margin-bottom: 5px;
}

.summary-count {
    color: var(--gh-text-tertiary);
    font-size: 0.8em;
}

.period-dynamic {
    color: var(--gh-text-primary);
    font-weight: 600;
}

/* Performance Cards - Standard Styles (außerhalb von #analytics-content) */
/* height/max-height bereits in .perf-card Basis-Definition */

/* Legacy Support für alte Analytics-Layouts (außerhalb von #analytics-content) */
.perf-card.wide.left,
.perf-card.wide.right {
    grid-column: 1 / 2 !important;
    /* Alle wide Karten in Spalte 1 */
}

.perf-card.compact.left,
.perf-card.compact.right {
    grid-column: 2 / 3 !important;
    /* Alle compact Karten in Spalte 2 */
}

/* Ultra-Wide Cards: 66% Breite (span 2) */
.perf-card.ultra-wide {
    grid-column: span 2;
    /* 66% der Seite */
}

/* Normal Cards: 30% Breite (default) - Grid-Column nur wenn nicht in #analytics-content */
.perf-card:not(#analytics-content .perf-card) {
    grid-column: span 1;
    /* 30% der Seite */
}

/* Lazy Loading States */
.perf-card[data-lazy="true"] {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: none;
}

.perf-card[data-lazy="loading"] {
    opacity: 0.3;
    transform: translateY(20px) scale(0.98);
}

.perf-card[data-lazy="loaded"] {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animations Refined */
@keyframes cardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes valueCounter {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chartGrow {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.perf-card.animate-in {
    animation: cardFadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.glass-metric .glass-value {
    animation: valueCounter 0.5s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

/* DEPRECATED: General .main-content rule - wird durch spezifische Regeln überschrieben */
/* CRITICAL: :not() cannot contain descendant combinators in standard CSS */
/* This rule is intentionally commented out - specific rules for each view are used instead */
/*
.main-content {
    display: grid;
    grid-template-columns: 50% 25% 25%;
    gap: var(--card-spacing);
}
*/

/* Glass-Metrics Grid */
.glass-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 0;
    max-width: 100%;
    /* Prevent overflow */
    box-sizing: border-box;
}

.glass-metric {
    text-align: center;
    padding: 8px;
    /* Reduced from 10px to prevent overflow */
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    max-width: 100%;
    /* Prevent overflow */
    box-sizing: border-box;
}

.glass-metric::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.glass-metric:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.glass-metric:hover::before {
    opacity: 1;
}

.glass-metric>* {
    position: relative;
    z-index: 2;
}

/* Chart Containers: Prevent overflow */
[data-chart-container],
#deal-chart-container,
#cost-chart-container,
.chart-container {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Deal Chart: Specific fixes */
#deal-chart-container {
    padding: 8px;
    /* Reduced from 12px */
    margin: 8px 0 12px 0;
}

/* Cost Chart Bars: Prevent overflow */
.cost-bars-container,
.bars-container {
    max-width: calc(100% - 40px);
    overflow-x: hidden;
    box-sizing: border-box;
}

.glass-value {
    font-size: 1.4em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2;
    margin-bottom: 4px;
    will-change: transform, opacity;
    backface-visibility: hidden;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.glass-metric:hover .glass-value {
    transform: scale(1.05);
    color: #fff;
}

.glass-label {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.glass-trend {
    display: block;
    font-size: 0.75em;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--gh-text-secondary);
}

.glass-trend.trend-up {
    color: var(--gh-text-primary);
}

.glass-trend.trend-down {
    color: var(--accent-yellow);
}

@media (max-width: 1200px) {
    .performance-grid {
        grid-template-columns: 1fr;
        /* Mobile: 1 Spalte */
    }

    .perf-card.wide,
    .perf-card.compact,
    .perf-card.ultra-wide {
        grid-column: span 1;
    }

    .main-content {
        grid-template-columns: 50% 25% 25%;
    }

    .cost-flow {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .performance-grid {
        grid-template-columns: 1fr;
    }

    .perf-card.wide,
    .perf-card.compact,
    .perf-card.ultra-wide {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .performance-grid {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    /* Analytics Section: Mobile Layout */
    #analytics-content .main-content {
        grid-template-columns: 1fr !important;
    }

    #analytics-content .recent-intel {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #analytics-content .key-metrics {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #analytics-content .performance-grid {
        grid-template-columns: 1fr;
        /* Mobile: eine Spalte */
    }

    .perf-card.wide,
    .perf-card.compact {
        grid-column: 1 !important;
    }

    .perf-card.ultra-wide {
        grid-column: span 1;
    }

    .glass-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .glass-metric {
        padding: 10px;
    }

    .glass-value {
        font-size: 1.5em;
    }

    .cost-flow {
        grid-template-columns: 1fr;
    }

    .ring-container {
        flex-direction: column;
        align-items: center;
    }
}

/* ===================================================
   TIME TAB STYLES (matching Intelligence Overview buttons)
   =================================================== */

.time-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

/* Timeframe-Auswahl im Header */
.time-filter-tabs-header {
    margin-bottom: 0;
    gap: 4px;
}

/* Header-Zeitfenster-Buttons in Review Section ausblenden */
#review-content.active~* .page-nav .time-filter-tabs,
body:has(#review-content.active) .page-nav .time-filter-tabs {
    display: none;
}

/* Header-Timefilter in Review Section ausblenden und Review-Buttons anzeigen */
body:has(#review-content.active) #header-time-filters {
    display: none !important;
}


body:has(#review-content.active) #review-header-buttons {
    display: flex !important;
    gap: 8px;
    align-items: center;
}

/* Review Progress Header in Review Section anzeigen */
body:has(#review-content.active) #review-progress-header {
    display: flex !important;
}

/* Review Content muss unter fixed-header starten */
#review-content {
    margin-top: 160px;
    /* Unter fixed-header (Header ~60px + Nav ~50px + Page-Nav ~50px) */
}

/* Admin Content */
/* Admin CSS moved to admin.css - loaded dynamically */

/* Tables Content */
#tables-content {
    margin-top: 160px;
}

/* Tables Styles */
.tables-table-card {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 20px;
    overflow-x: auto;
}

.tables-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--gh-text-primary);
    font-size: 14px;
}

.tables-table thead {
    background: var(--gh-bg-secondary);
    border-bottom: 2px solid var(--gh-border);
}

.tables-table th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: var(--gh-text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.tables-table th:hover {
    background: var(--gh-bg-tertiary);
}

.tables-table th.sortable::after {
    content: ' ↕';
    opacity: 0.5;
    font-size: 10px;
}

.tables-table th.sort-asc::after {
    content: ' ↑';
    opacity: 1;
    color: var(--gh-text-primary);
}

.tables-table th.sort-desc::after {
    content: ' ↓';
    opacity: 1;
    color: var(--gh-text-primary);
}

.tables-table tbody tr {
    border-bottom: 1px solid var(--gh-border);
    transition: all 0.2s ease;
}

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

.tables-table td {
    padding: 12px 15px;
    color: var(--gh-text-secondary);
}

.tables-table td.editable {
    cursor: pointer;
    position: relative;
}

.tables-table td.editable:hover {
    background: var(--gh-bg-tertiary);
}

.tables-table td.editing {
    padding: 0;
}

.tables-table td.editing input,
.tables-table td.editing textarea {
    width: 100%;
    padding: 12px 15px;
    background: var(--gh-bg-tertiary);
    border: 2px solid var(--gh-border);
    border-radius: 4px;
    color: var(--gh-text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.tables-table td.editing textarea {
    min-height: 60px;
    resize: vertical;
}

.tables-table td.editing input:focus,
.tables-table td.editing textarea:focus {
    border-color: var(--gh-border);
    box-shadow: none;
}

.tables-table td.editing .cell-actions {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.tables-table td.editing .cell-actions button {
    padding: 4px 10px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tables-table td.editing .cell-actions button.save {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
}

.tables-table td.editing .cell-actions button.save:hover {
    background: var(--gh-bg-tertiary);
}

.tables-table td.editing .cell-actions button.cancel {
    background: var(--accent-orange-20);
    color: var(--accent-orange);
}

.tables-table td.editing .cell-actions button.cancel:hover {
    background: rgba(255, 87, 34, 0.5);
}

.tables-table .cell-value {
    display: block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tables-table .cell-value.long-text {
    white-space: normal;
    max-width: 500px;
    max-height: 100px;
    overflow: hidden;
}

.tables-pagination-btn {
    padding: 8px 15px;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    color: var(--gh-text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.tables-pagination-btn:hover:not(:disabled) {
    background: var(--gh-bg-tertiary);
    border-color: var(--gh-border);
    transform: translateY(-1px);
}

.tables-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tables-pagination-info {
    color: var(--gh-text-secondary);
    font-size: 13px;
    padding: 0 10px;
}

.tables-select {
    padding: 10px 15px;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    color: var(--gh-text-primary);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    min-width: 250px;
    outline: none;
    transition: all 0.2s ease;
}

.tables-select:hover {
    background: var(--gh-bg-tertiary);
    border-color: var(--gh-border);
}

.tables-select:focus {
    border-color: var(--gh-border);
    box-shadow: none;
}

.tables-select option {
    background: var(--gh-bg-primary);
    color: var(--gh-text-primary);
}

/* Toast Notification for Table Updates */
.tables-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 15px 20px;
    background: var(--gh-bg-tertiary);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    color: var(--gh-text-primary);
    font-size: 14px;
    z-index: 10000;
    animation: slideInRight 0.3s ease;
}

.tables-toast.error {
    background: var(--accent-orange-20);
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Admin Layout Wrapper (1/3 + 2/3) - Legacy */
.admin-layout-wrapper {
    max-width: 1600px;
    margin: 20px auto;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 0 30px;
}

/* Admin Layout Wrapper (Einfach: 2 Spalten) */
.admin-layout-simple {
    max-width: 1600px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
    padding: 0 30px;
}

/* RSS Tabs (oben im Content-Bereich) */
.admin-rss-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--gh-border);
    padding-bottom: 12px;
}

.admin-rss-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--gh-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: -12px;
}

.admin-rss-tab:hover {
    color: var(--gh-text-primary);
}

.admin-rss-tab.active {
    color: var(--ios-blue-primary);
    border-bottom-color: var(--ios-blue-primary);
}

.admin-rss-tab i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* News-Sektion (unter den Badges) */
.admin-news-section {
    margin-top: 40px;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    overflow: hidden;
}

.admin-news-section .admin-news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gh-border);
    background: var(--gh-bg-tertiary);
}

.section-subtitle {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--gh-text-primary);
    margin: 0;
}

.admin-news-section .admin-news-feed {
    max-height: 400px;
    overflow-y: auto;
    padding: 16px;
}

/* Links: Admin-Funktionen Sidebar */
.admin-functions-sidebar {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 10px;
}

/* Rechts: Content-Bereich */
.admin-content-area {
    display: flex;
    flex-direction: column;
    gap: var(--card-spacing);
}

/* RSS Badges Container (4 Spalten) */
.admin-rss-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1400px) {
    .admin-rss-badges {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-rss-badges {
        grid-template-columns: 1fr;
    }
}

/* News-Feed Styling */
.admin-news-feed::-webkit-scrollbar {
    width: 6px;
}

.admin-news-feed::-webkit-scrollbar-track {
    background: var(--bg-overlay-30);
    border-radius: 3px;
}

.admin-news-feed::-webkit-scrollbar-thumb {
    background: var(--gh-bg-tertiary);
    border-radius: 3px;
}

.admin-news-feed::-webkit-scrollbar-thumb:hover {
    background: var(--gh-bg-tertiary);
}

.admin-news-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--gh-bg-tertiary);
    border: 1px solid var(--gh-border);
    transition: all 0.2s ease;
}

.admin-news-item:hover {
    background: var(--gh-bg-secondary);
    transform: translateX(4px);
}

.admin-news-item-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-news-item-icon i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.admin-news-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-news-item-message {
    font-size: 0.85em;
    color: var(--gh-text-primary);
    line-height: 1.4;
}

.admin-news-item-time {
    font-size: 0.75em;
    color: var(--gh-text-tertiary);
}

.admin-news-item-green .admin-news-item-icon {
    color: #28A745;
}

.admin-news-item-red .admin-news-item-icon {
    color: #ef4444;
}

.admin-news-item-blue .admin-news-item-icon {
    color: #3b82f6;
}

/* Responsive: Einfaches Layout */
@media (max-width: 1200px) {
    .admin-layout-simple {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .admin-functions-sidebar {
        position: relative;
        top: 0;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .admin-layout-simple {
        padding: 0 15px;
    }

    .admin-rss-badges {
        grid-template-columns: 1fr;
    }
}

/* Links: Funktionen-Sidebar (1/3) */
.admin-functions-sidebar {
    flex: 0 0 calc(33.3% - 20px);
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 10px;
}

.admin-functions-sidebar::-webkit-scrollbar {
    width: 6px;
}

.admin-functions-sidebar::-webkit-scrollbar-track {
    background: var(--bg-overlay-30);
    border-radius: 3px;
}

.admin-functions-sidebar::-webkit-scrollbar-thumb {
    background: var(--gh-bg-tertiary);
    border-radius: 3px;
}

.admin-functions-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--gh-bg-tertiary);
}

.admin-sidebar-header {
    margin-bottom: 20px;
}

.admin-functions-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.admin-function-group {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 15px;
}

.admin-group-header {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--gh-text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gh-border);
}

.admin-function-item {
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--gh-text-secondary);
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    margin-bottom: 5px;
}

.admin-function-item:hover {
    background: var(--gh-bg-secondary);
    color: var(--gh-text-primary);
    transform: translateX(5px);
}

.admin-function-item.active {
    background: var(--gh-bg-tertiary);
    border-left: 3px solid var(--gh-border);
    color: var(--gh-text-primary);
}

.admin-function-icon {
    font-size: 1.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-function-icon i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.status-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gh-text-tertiary);
}

.status-empty-icon i {
    width: 48px;
    height: 48px;
    stroke-width: 1.5;
}

.admin-function-name {
    flex: 1;
    font-size: 0.9em;
    font-weight: 500;
}

/* Rechts: Service-Dashboard (2/3) */
.admin-dashboard-panel {
    flex: 0 0 calc(66.6% - 20px);
    display: flex;
    flex-direction: column;
    gap: var(--card-spacing);
}

.admin-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.admin-dashboard-refresh {
    display: flex;
    align-items: center;
}

.admin-refresh-btn {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--gh-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-refresh-btn:hover {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    border-color: var(--ios-blue-primary);
}

.admin-refresh-btn:active {
    transform: rotate(180deg);
}

/* Service Badges Container */
.admin-service-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1024px) {
    .admin-service-badges {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-service-badges {
        grid-template-columns: 1fr;
    }
}

/* Loader removed - using metric-card structure instead */

/* Service Badge Item */
.admin-service-badge {
    background: var(--lg-layer-base);
    border: 1px solid var(--lg-border);
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    border-radius: var(--lg-border-radius);
    padding: 24px;
    box-shadow: var(--lg-shadow-combined);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-service-badge:hover {
    border-color: var(--ios-blue-primary);
    box-shadow: var(--lg-shadow-combined), 0 0 12px rgba(40, 167, 69, 0.15);
    transform: translateY(-2px);
}

.service-badge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.service-badge-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--gh-text-primary);
}

.service-badge-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: var(--ios-blue-primary);
}

.service-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
}

.service-badge-status.active {
    background: rgba(40, 167, 69, 0.15);
    color: var(--ios-blue-primary);
}

.service-badge-status.running {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.service-badge-status.inactive {
    background: rgba(108, 117, 125, 0.15);
    color: var(--gh-text-tertiary);
}

.service-badge-status.operational {
    background: rgba(40, 167, 69, 0.15);
    color: var(--ios-blue-primary);
}

.service-badge-status.degraded {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.service-badge-status.no_data {
    background: rgba(108, 117, 125, 0.15);
    color: var(--gh-text-tertiary);
}

.service-badge-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.service-badge-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.service-badge-stat-label {
    font-size: 0.8em;
    color: var(--gh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-badge-stat-value {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--gh-text-primary);
}

.service-badge-time {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--lg-border);
    font-size: 0.85em;
    color: var(--gh-text-secondary);
}

/* ===================================================
   SERVICE BADGES (Dashboard Metric Card Style)
   =================================================== */

/* Service badges use same structure as dashboard metric cards */
.admin-service-badge-compact {
    /* Uses .metric-card styles from liquid-glass.css */
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

/* Service badge specific overrides - Match Dashboard Metric Cards exactly */
.admin-service-badge-compact .metric-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.admin-service-badge-compact .metric-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gh-text-secondary);
    flex-shrink: 0;
    opacity: 0.8;
}

.admin-service-badge-compact .metric-icon i {
    width: 20px;
    height: 20px;
}

.admin-service-badge-compact .metric-label {
    font-size: 12px;
    color: var(--gh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.admin-service-badge-compact .metric-trend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
}

.admin-service-badge-compact .trend-arrow {
    color: var(--positive-green);
    font-size: 14px;
}

.admin-service-badge-compact .trend-arrow.down {
    color: #ef4444;
}

.admin-service-badge-compact .trend-value {
    color: var(--gh-text-secondary);
    font-size: 13px;
    font-weight: 600;
}

/* Trend value color matches arrow color */
.admin-service-badge-compact .metric-trend .trend-arrow.down~.trend-value {
    color: #ef4444;
}

.admin-service-badge-compact .metric-trend .trend-arrow:not(.down)~.trend-value {
    color: var(--positive-green);
}

.admin-service-badge-compact .metric-mini-graph {
    width: 100%;
    height: 36px;
    margin-bottom: 16px;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.admin-service-badge-compact .metric-mini-graph svg {
    width: 100%;
    height: 100%;
}

.admin-service-badge-compact .metric-value-wrapper {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: auto;
}

.admin-service-badge-compact .metric-value-total {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--gh-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
}

.admin-service-badge-compact .metric-value-separator {
    font-size: 1.5em;
    font-weight: 400;
    color: var(--gh-text-tertiary);
    opacity: 0.5;
}

.admin-service-badge-compact .metric-value-period {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--gh-text-secondary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 4px;
}

/* Value Labels (like Dashboard Cards) */
.admin-service-badge-compact .metric-value-labels {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.75em;
    color: var(--gh-text-tertiary);
    opacity: 0.7;
    font-weight: 500;
}

.admin-service-badge-compact .metric-value-label-primary,
.admin-service-badge-compact .metric-value-label-secondary {
    text-transform: capitalize;
}

.admin-service-badge-compact .metric-value-label-separator {
    opacity: 0.5;
}

/* Critical Warning Styles */
.admin-service-badge-compact.service-badge-critical {
    border-left: 3px solid #ef4444 !important;
    background: rgba(239, 68, 68, 0.05);
    position: relative;
}

.admin-service-badge-compact.service-badge-critical::before {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
}

.admin-service-badge-compact .service-badge-critical-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #ef4444;
    z-index: 10;
    animation: pulse 2s infinite;
}

.admin-service-badge-compact .service-badge-critical-indicator i {
    width: 18px;
    height: 18px;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .admin-service-badge-compact .metric-value-total {
        font-size: 2em;
    }

    .admin-service-badge-compact .metric-value-period {
        font-size: 1.2em;
    }

    .admin-service-badge-compact .metric-mini-graph {
        height: 28px;
    }

    .admin-service-badge-compact .metric-card-header {
        margin-bottom: 12px;
    }

    .admin-service-badge-compact .metric-trend {
        margin-bottom: 10px;
    }
}

.admin-findings-header {
    padding: 20px;
    border-bottom: 1px solid var(--gh-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gh-bg-primary);
}

.findings-count {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
}

.admin-findings-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-findings-container::-webkit-scrollbar {
    width: 6px;
}

.admin-findings-container::-webkit-scrollbar-track {
    background: var(--bg-overlay-30);
    border-radius: 3px;
}

.admin-findings-container::-webkit-scrollbar-thumb {
    background: var(--gh-bg-tertiary);
    border-radius: 3px;
}

.admin-findings-container::-webkit-scrollbar-thumb:hover {
    background: var(--gh-bg-tertiary);
}

.admin-findings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--gh-text-tertiary);
}

.findings-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gh-text-tertiary);
    margin-bottom: 15px;
}

.findings-empty-icon i {
    width: 48px;
    height: 48px;
    stroke-width: 1.5;
}

.findings-empty-text {
    font-size: 0.9em;
    color: var(--gh-text-tertiary);
}

/* Findings Badge */
.finding-badge {
    background: var(--gh-bg-primary);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;
    animation: fadeInBadge 0.3s ease-in;
    cursor: pointer;
}

.finding-badge:hover {
    border-color: var(--gh-border-active);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@keyframes fadeInBadge {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.finding-badge-name {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--gh-text-primary);
    flex: 1;
    line-height: 1.3;
}

.finding-badge-score {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 8px;
}

.finding-badge-score.high {
    background: rgba(34, 197, 94, 0.2);
    color: rgb(34, 197, 94);
}

.finding-badge-score.medium {
    background: rgba(251, 191, 36, 0.2);
    color: rgb(251, 191, 36);
}

.finding-badge-score.low {
    background: rgba(156, 163, 175, 0.2);
    color: rgb(156, 163, 175);
}

.finding-badge-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.finding-badge-tag {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-secondary);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    white-space: nowrap;
}

.finding-badge-url {
    margin-top: 8px;
    font-size: 0.8em;
    color: var(--gh-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finding-badge-url a {
    color: var(--gh-text-tertiary);
    text-decoration: none;
}

.finding-badge-url a:hover {
    color: var(--gh-text-primary);
    text-decoration: underline;
}

/* FEED BADGE STYLES - Liquid Glass Design */

.feed-badge {
    background: var(--lg-layer-base);
    border: 1px solid var(--lg-border);
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    box-shadow: var(--lg-shadow-combined);
    border-radius: var(--lg-border-radius);
    padding: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: fadeInBadge 0.3s ease-in;
    cursor: pointer;
    margin-bottom: 12px;
}

.feed-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 20%,
            transparent 40%);
    border-radius: var(--lg-border-radius) var(--lg-border-radius) 0 0;
    pointer-events: none;
    z-index: 1;
}

.feed-badge:hover {
    border-color: var(--ios-blue-primary);
    box-shadow: var(--lg-shadow-hover-combined);
    transform: translateY(-2px) scale(1.01);
}

.feed-badge-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.feed-badge-name {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--gh-text-primary);
    flex: 1;
    line-height: 1.3;
}

.feed-badge-status {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 8px;
}

.feed-badge-status.feed-status-active {
    background: rgba(40, 167, 69, 0.2);
    color: var(--ios-blue-primary);
}

.feed-badge-status.feed-status-dead {
    background: rgba(255, 59, 48, 0.2);
    color: rgba(255, 59, 48, 0.8);
}

.feed-badge-status.feed-status-error {
    background: rgba(255, 149, 0, 0.2);
    color: rgba(255, 149, 0, 0.8);
}

.feed-badge-status.feed-status-inactive {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-tertiary);
}

.feed-badge-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    position: relative;
    z-index: 2;
}

.feed-badge-stat {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-secondary);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    white-space: nowrap;
}

.feed-badge-url {
    margin-top: 8px;
    font-size: 0.8em;
    color: var(--gh-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.feed-badge-url a {
    color: var(--gh-text-tertiary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.feed-badge-url a:hover {
    color: var(--ios-blue-primary);
    text-decoration: underline;
}

/* Dark Mode Adjustments for Feed Badges */
.dark .feed-badge {
    background: var(--lg-layer-base);
    border-color: var(--lg-border);
}

.dark .feed-badge::before {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.04) 20%,
            transparent 40%);
}

.dark .feed-badge:hover {
    border-color: var(--ios-blue-primary);
    box-shadow: var(--lg-shadow-hover-combined);
}

/* Finding Badge Liquid Glass Updates */
.finding-badge {
    background: var(--lg-layer-base);
    border: 1px solid var(--lg-border);
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    box-shadow: var(--lg-shadow-combined);
    border-radius: var(--lg-border-radius);
    padding: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: fadeInBadge 0.3s ease-in;
    cursor: pointer;
    margin-bottom: 12px;
}

.finding-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 20%,
            transparent 40%);
    border-radius: var(--lg-border-radius) var(--lg-border-radius) 0 0;
    pointer-events: none;
    z-index: 1;
}

.finding-badge:hover {
    border-color: var(--ios-blue-primary);
    box-shadow: var(--lg-shadow-hover-combined);
    transform: translateY(-2px) scale(1.01);
}

.finding-badge-header {
    position: relative;
    z-index: 2;
}

.finding-badge-score.high {
    background: rgba(40, 167, 69, 0.2);
    color: var(--ios-blue-primary);
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
}

/* Dark Mode Adjustments for Finding Badges */
.dark .finding-badge {
    background: var(--lg-layer-base);
    border-color: var(--lg-border);
}

.dark .finding-badge::before {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.04) 20%,
            transparent 40%);
}

.dark .finding-badge:hover {
    border-color: var(--ios-blue-primary);
    box-shadow: var(--lg-shadow-hover-combined);
}

.admin-status-header {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 20px;
}

.admin-status-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.admin-status-operation {
    font-size: 1.1em;
    color: var(--gh-text-primary);
    font-weight: 600;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.waiting {
    background: rgba(136, 136, 136, 0.2);
    border: 1px solid rgba(136, 136, 136, 0.4);
    color: var(--gh-text-secondary);
}

.status-badge.running {
    background: var(--gh-bg-tertiary);
    border: 1px solid var(--gh-border);
    color: var(--gh-text-primary);
    animation: waitingPulse 2s infinite;
}

.status-badge.success {
    background: var(--gh-bg-tertiary);
    border: 1px solid var(--gh-border);
    color: var(--gh-text-primary);
}

.status-badge.error {
    background: var(--accent-orange-20);
    border: 1px solid var(--accent-orange-20);
    color: var(--accent-orange);
}

.status-badge-icon {
    font-size: 1em;
}

/* Status Steps */
.admin-status-steps {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 25px;
    min-height: 400px;
}

.admin-status-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--gh-text-tertiary);
}


.status-empty-text {
    font-size: 1.1em;
    color: var(--gh-text-secondary);
}

.admin-status-step {
    background: var(--gh-bg-tertiary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.admin-status-step.active {
    border-color: var(--gh-border);
    box-shadow: none;
    animation: waitingPulse 2s infinite;
}

.admin-status-step.completed {
    border-color: var(--gh-border);
    background: var(--gh-bg-secondary);
}

.admin-status-step.error {
    border-color: var(--accent-orange-20);
    background: rgba(255, 87, 34, 0.05);
}

.step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.step-icon {
    font-size: 1.5em;
    width: 32px;
    text-align: center;
}

.step-name {
    flex: 1;
    font-weight: 600;
    color: var(--gh-text-primary);
    font-size: 1em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
}

.step-status {
    font-size: 0.85em;
    color: var(--gh-text-secondary);
}

.step-subtask {
    font-size: 0.85em;
    color: var(--gh-text-primary);
    margin-top: 6px;
    margin-left: 32px;
    padding-left: 8px;
    border-left: 2px solid var(--gh-border);
    opacity: 0.9;
    font-style: italic;
    transition: opacity 0.3s ease;
}

.admin-status-step.running .step-subtask {
    animation: subtaskPulse 2s infinite;
}

@keyframes subtaskPulse {

    0%,
    100% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.6;
    }
}

.step-progress {
    margin-top: 10px;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.step-progress-fill {
    height: 100%;
    background: var(--gh-bg-tertiary);
    border-radius: 2px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
    will-change: width;
    transform: translateZ(0);
}

.step-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.step-details {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--gh-border);
    font-size: 0.85em;
    color: var(--gh-text-secondary);
    font-family: monospace;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
}

/* Config Section */
.admin-config-section {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 25px;
}

.admin-config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.admin-btn-add {
    padding: 10px 20px;
    font-size: 0.9em;
}

#config-table-container {
    margin-top: 15px;
}

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

.config-table th,
.config-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--gh-border);
}

.config-table th {
    background: var(--gh-bg-secondary);
    color: var(--gh-text-primary);
    font-weight: 600;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.config-table td {
    color: var(--gh-text-secondary);
}

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

.config-actions {
    display: flex;
    gap: 10px;
}

.config-action-btn {
    padding: 5px 12px;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 4px;
    color: var(--gh-text-primary);
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
}

.config-action-btn:hover {
    background: var(--gh-bg-tertiary);
    border-color: var(--gh-border);
}

.config-action-btn.delete {
    background: rgba(255, 87, 34, 0.1);
    border-color: var(--accent-orange-20);
    color: var(--accent-orange);
}

.config-action-btn.delete:hover {
    background: var(--accent-orange-20);
    border-color: var(--accent-orange);
}

.config-secret {
    font-family: monospace;
    color: var(--gh-text-tertiary);
}

/* Responsive Design */
@media (max-width: 1400px) {
    .admin-layout-wrapper {
        flex-direction: column;
    }

    .admin-functions-sidebar {
        flex: 1;
        position: relative;
        max-height: none;
    }

    .admin-status-panel {
        flex: 1;
    }

    .admin-findings-panel {
        flex: 1;
        position: relative;
        max-height: 600px;
    }
}

@media (max-width: 768px) {
    .admin-layout-wrapper {
        padding: 0 15px;
    }

    .admin-status-header,
    .admin-status-steps,
    .admin-config-section {
        padding: 15px;
    }
}

.review-hero {
    padding: 0 30px;
    margin-bottom: 20px;
}

.learning-stats-banner {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: var(--card-spacing);
    flex-wrap: wrap;
}

/* Review Header Buttons - verwenden .time-tab Klasse (identisch mit Dashboard/News) */
.review-header-buttons {
    display: none;
    gap: 8px;
    align-items: center;
}

/* Review Header Buttons verwenden jetzt .time-tab - keine zusätzlichen Styles nötig */
/* WICHTIG: .review-header-button hat KEINE eigenen Styles - verwendet nur .time-tab */
.review-header-button {
    /* Alle Styles kommen von .time-tab - identisch mit Dashboard/News Buttons */
    /* Keine Überschreibungen - .time-tab Styles gelten vollständig */
    height: auto !important;
    /* Gleiche Höhe wie Dashboard-Buttons */
    line-height: normal !important;
    /* Gleiche Line-Height wie Dashboard-Buttons */
    min-height: 0 !important;
    /* Keine min-height wie Dashboard-Buttons */
    box-sizing: border-box !important;
    /* Gleiche Box-Sizing wie Dashboard-Buttons */
}

/* Sort dropdown positioning for review header buttons */
.review-header-buttons .sort-wrapper {
    position: relative;
}

.review-header-buttons .sort-wrapper .sort-dropdown {
    top: calc(100% + 8px);
    right: 0;
}

/* Header Left Section - für Breadcrumb */
.header-left-section {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

/* Breadcrumb vertikal mittig */
.header-left-section .breadcrumb {
    align-self: center;
}

/* Review Progress Header - Progress Bar & KPIs (mittig zwischen Breadcrumb und Buttons) */
.review-progress-header {
    display: flex;
    align-items: center;
    gap: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% - 200px), -50%);
    /* Horizontal: 50% minus Offset für perfekte Zentrierung, Vertikal: mittig */
    margin-right: 100px;
    /* 100px Abstand zu den Buttons */
}

.review-progress-bar-container {
    display: flex;
    align-items: center;
    min-width: 150px;
}

.review-progress-bar {
    width: 150px;
    height: 4px;
    background: rgba(139, 148, 158, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.review-progress-fill {
    height: 100%;
    background: var(--gh-text-secondary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.review-progress-text {
    display: none;
    /* Text entfernt für zurückhaltenderes Design */
}

.review-kpi-container {
    display: flex;
    gap: 16px;
    align-items: center;
}

.review-kpi-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--gh-text-secondary);
    white-space: nowrap;
}

.review-kpi-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--gh-text-primary);
    line-height: 1;
}

.review-kpi-label {
    font-size: 11px;
    color: var(--gh-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.learning-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.learning-stat-label {
    font-size: 12px;
    color: var(--gh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.learning-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--gh-text-primary);
}

.learning-divider {
    width: 1px;
    height: 40px;
    background: var(--gh-bg-tertiary);
}

.time-tab {
    background: linear-gradient(135deg, rgba(10, 20, 30, 0.7), var(--bg-overlay-50));
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--gh-text-secondary);
    font-size: 13px;
    transition: all 0.15s ease;
    font-weight: 500;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.time-tab:hover {
    background: var(--gh-bg-secondary);
    border-color: var(--gh-border);
    color: var(--gh-text-primary);
    transform: translateY(-1px);
}

.time-tab.active,
.dark.liquid-glass .time-tab.active,
.review-header-button.active,
.dark.liquid-glass .review-header-button.active {
    background: rgba(28, 28, 30, 0.8) !important;
    border: 1px solid var(--positive-green) !important;
    color: var(--positive-green) !important;
    box-shadow: none;
    font-weight: 600;
}

.time-tab:not(.active),
.dark.liquid-glass .time-tab:not(.active),
.review-header-button:not(.active),
.dark.liquid-glass .review-header-button:not(.active) {
    background: rgba(28, 28, 30, 0.6) !important;
    border: 1px solid transparent !important;
    color: var(--gh-text-secondary) !important;
}

/* ===================================================
   === Loader V1.54: CSS ===
   LOADING SCREEN STYLES
   =================================================== */

/* Loading Screen Container */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 15, 20, .98) 0%, rgba(15, 25, 35, .95) 100%);
    z-index: 9999;
    color: var(--gh-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: none;
    align-items: center;
    justify-content: center;
}

.loading-screen.show {
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-badge {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--gh-border),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.loading-badge.show {
    opacity: 1;
    transform: translateY(0);
}

.loading-container {
    position: relative;
    width: 100%;
}

.loading-logo {
    font-size: 28px;
    font-weight: 700;
    color: var(--gh-text-primary);
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.loading-subtitle {
    color: var(--gh-text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
    font-family: 'JetBrains Mono', monospace;
}

.loading-complete {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--gh-border);
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out;
}

.loading-complete.show {
    opacity: 1 !important;
}

.complete-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--gh-text-primary);
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.complete-subtitle {
    font-size: 14px;
    color: var(--gh-text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

.loading-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Loading Steps */
.loading-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    flex: 1;
    width: 100%;
    max-height: 400px;
    overflow: visible;
}

.loading-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 5px;
    transition: all 0.3s ease;
    opacity: 0.6;
    position: relative;
    overflow: hidden;
    min-height: 30px;
    height: 30px;
}

.step-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7em;
    color: var(--gh-text-primary);
    text-align: left;
    margin: 0;
    font-weight: 500;
    flex: 1;
    min-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    color: var(--gh-text-primary);
    text-align: right;
    margin: 0;
    font-weight: bold;
    min-width: 40px;
}

.step-bar {
    flex: 1.5;
    height: 8px;
    background: var(--gh-bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.step-fill {
    height: 100%;
    background: var(--gh-bg-tertiary);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 4px;
    will-change: width;
    transform: translateZ(0);
}

/* Horizontal Bar Chart Styles (Dashboard) - DEPRECATED: Use analytics-badges.css instead */
/* Diese Styles sind durch analytics-badges.css ersetzt worden */

/* Glowing-Effekt für Step 8 (70% Wartezeit) */
.loading-step.waiting {
    opacity: 1;
    background: var(--gh-bg-tertiary);
    border-color: var(--gh-border);
    box-shadow: none;
    animation: waitingPulse 2s ease-in-out infinite;
}

.loading-step.waiting .step-fill {
    background: var(--gh-bg-tertiary);
    background-size: 200% 100%;
    animation: waitingShimmer 1.5s ease-in-out infinite;
}

.loading-step.waiting .step-name,
.loading-step.waiting .step-count {
    color: var(--gh-text-primary);
    text-shadow: none;
}

@keyframes waitingPulse {

    0%,
    100% {
        box-shadow: none;
    }

    50% {
        box-shadow: none;
    }
}

@keyframes waitingShimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Analytics Content - Position für Overlay */
#analytics-content {
    position: relative;
}

/* Analytics Section: Main Content Grid (100% Breite - keine Sidebar) */
#analytics-content .main-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    /* 100% Breite - Sidebar entfernt */
    gap: 24px;
    align-items: start !important;
}

/* Analytics Section: Performance Charts (100% Breite) */
#analytics-content .recent-intel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100%;
}

/* Analytics Section: Analytics Sidebar (versteckt) */
#analytics-content .key-metrics {
    display: none !important;
}

/* Analytics Performance Grid - 2/3 / 1/3 Layout */
#analytics-content .performance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 gleich große Spalten */
    gap: 16px;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-auto-flow: row;
}

/* Performance Cards - 2/3 / 1/3 Layout */
/* Alle Cards gleich groß - 1 Spalte */
#analytics-content .perf-card {
    grid-column: span 1;
    width: 100%;
}

/* DASHBOARD LAYOUT STYLES */

/* NETWORK TRACKER LAYOUT - Sidebar + Content */

/* Main Layout Container */
.app-layout {
    display: flex;
    min-height: calc(100vh - 45px);
    /* Subtract footer height */
    overflow: visible !important;
    background: var(--gh-bg-primary);
    padding-bottom: 45px;
    /* Space for fixed footer */
}

/* Sidebar Navigation */
.sidebar-nav {
    flex-shrink: 0;
    width: 202px;
    /* Dynamisch berechnet: Längster Text + 50px (für GESAMTE Sidebar) - wird von JavaScript überschrieben */
    min-width: 200px;
    max-width: 600px;
    display: flex;
    flex-direction: row;
    transition: width 0.2s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--gh-bg-secondary, rgba(28, 28, 30, 0.7));
    /* Hintergrund für gesamte Sidebar */
    border-right: 2px solid rgba(255, 255, 255, 0.1);
    /* 2px für besseren Resize-Bereich, gleiche Optik wie vorher */
}

/* Wenn Icon-Bar expanded ist, Sidebar-Nav breiter machen (Icon-Bar: 47px → 200px = +153px) */
/* Berechne neue Breite: Alte Breite + (Expanded Icon-Bar Breite - Standard Icon-Bar Breite) */
/* Standard: 270px (oder gespeicherte Breite), Icon-Bar: 47px → 200px = +153px */
/* Die Sidebar-Nav wird automatisch breiter, damit das Hauptmenü nicht überlappt */
/* Flex-Layout passt sich automatisch an */
/* Note: CSS-Regel nicht nötig, da Flex-Layout automatisch passt */

/* Resize Handle */
.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cursor ändern nur wenn nahe am rechten Rand - wird von JavaScript gesteuert */
.sidebar-nav.resizing {
    cursor: col-resize !important;
    user-select: none;
}

/* Kein Symbol beim Hover - nur Trennlinie */

/* Toggle Button auf Resize Handle */
.sidebar-toggle-btn {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gh-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gh-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 11;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sidebar-resize-handle:hover .sidebar-toggle-btn,
.sidebar-toggle-btn:hover {
    opacity: 1;
    background: var(--ios-blue-primary);
    border-color: var(--ios-blue-primary);
    color: white;
}

.sidebar-toggle-btn i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

/* Sandwich Menu Button ist jetzt Teil der Icon-Bar - kein separates Styling nötig */

/* Collapsed Sidebar */
.sidebar-nav.collapsed {
    width: 47px !important;
    /* Entspricht sidebar-icon-bar Breite (47px) */
    min-width: 47px !important;
}

.sidebar-nav.collapsed .sidebar-content {
    display: none !important;
}

/* WICHTIG: Icon-Bar muss IMMER sichtbar sein, auch wenn sidebar-nav collapsed ist */
.sidebar-nav.collapsed .sidebar-icon-bar-wrapper,
.sidebar-nav.collapsed .sidebar-icon-bar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 47px !important;
}

.sidebar-nav.collapsed .sidebar-resize-handle {
    width: 47px;
    /* Entspricht sidebar-icon-bar Breite (47px) */
    right: 0;
}

.sidebar-nav.collapsed .sidebar-toggle-btn {
    right: 6px;
}

/* Wrapper für Icon-Bar mit Resize-Handle */
.sidebar-icon-bar-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
}

/* Vertikale Icon-Leiste links - Seriös, klein, weiß */
.sidebar-icon-bar {
    width: 47px;
    /* Standardmäßig IMMER eingeklappt - nur Icons */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Icons mittig horizontal */
    justify-content: flex-start;
    /* Start oben, damit Sandwich Icon mit Kundenname ausgerichtet werden kann */
    padding: 12px 8px;
    /* Entspricht Design-Spezifikation */
    gap: 12px;
    /* Mehr Abstand zwischen Icons */
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    background: var(--gh-bg-secondary, rgba(28, 28, 30, 0.7));
    /* Gleicher Hintergrund wie Sidebar */
    flex-shrink: 0;
    transition: width 0.3s ease;
    overflow: hidden;
    position: relative;
}

/* Resize Handle für Icon-Bar */
.icon-bar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Kein Symbol beim Hover - nur Trennlinie */

.sidebar-icon-bar.expanded {
    padding: 12px 12px;
}

/* Breite setzen wenn expanded-Klasse gesetzt UND inline-Style vorhanden */
/* WICHTIG: JavaScript setzt inline-Style, diese Regel unterstützt das */
/* Note: Inline-Style hat Vorrang - keine CSS-Regel nötig */

/* Fallback: Breite setzen wenn expanded-Klasse gesetzt aber kein inline-Style */
.sidebar-icon-bar.expanded:not([style*="width"]) {
    width: 200px;
}

/* WICHTIG: Verhindere automatisches Ausklappen beim Start - IMMER eingeklappt */
.sidebar-icon-bar:not(.expanded) {
    width: 47px;
}

/* Standardmäßig IMMER eingeklappt - verhindert CSS-Regel beim Start */
/* WICHTIG: Nur wenn keine inline-Style vorhanden ist */
.sidebar-icon-bar:not(.expanded):not([style*="width"]) {
    width: 47px !important;
}

.sidebar-icon-bar.expanded .sidebar-icon-item {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    /* Vertikal zentriert */
    padding: 4px 8px;
    gap: 10px;
}

.sidebar-icon-bar.expanded .sidebar-icon-item::after {
    content: attr(data-tooltip);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    white-space: nowrap;
    margin-left: 10px;
    opacity: 1;
    transition: opacity 0.2s ease;
    text-align: left !important;
    /* Linksbündig - wichtig */
    display: block;
    /* Block für Flex-Item */
    flex: 1 1 auto;
    /* Nimmt verfügbaren Platz ein */
    align-self: center;
    /* Vertikal zentriert */
    overflow: hidden;
    /* Verhindert Text-Overflow */
    text-overflow: ellipsis;
    /* Ellipsis bei zu langem Text */
}

/* Aktiver Text: Fett und weiß */
.sidebar-icon-bar.expanded .sidebar-icon-item.active::after {
    color: rgb(255, 255, 255) !important;
    /* Vollständig weiß - wichtig */
    font-weight: 700 !important;
    /* Fett - wichtig */
    text-align: left !important;
    /* Linksbündig - wichtig */
}

/* Sandwich-Icon in expanded Mode */
.sidebar-icon-bar.expanded #sandwich-menu-btn {
    margin-bottom: 20px !important;
    /* Mehr Abstand in expanded Mode */
    padding: 10px 8px !important;
}

.sidebar-icon-bar.expanded #sandwich-menu-btn::after {
    content: attr(data-tooltip);
    /* Text anzeigen */
    width: auto;
    /* Automatische Breite für Text */
    left: auto;
    /* Reset left */
    transform: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    white-space: nowrap;
    margin-left: 10px;
    opacity: 1;
    text-align: left !important;
    display: block;
    flex: 1 1 auto;
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-icon-item {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    /* Vertikal mittig */
    justify-content: center;
    /* Horizontal mittig */
    border-radius: 4px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    flex-shrink: 0;
    align-self: center;
    /* Horizontal mittig im Frame */
}

.sidebar-icon-item:hover {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.8);
}

/* Aktive Icons: Weiß/voll */
.sidebar-icon-item.active {
    background: transparent;
    color: rgba(255, 255, 255, 1);
    /* Vollständig weiß */
    font-weight: bold;
    /* Fett */
}

/* Aktiver Leuchtbalken links - nur wenn NICHT gehovered (damit Tooltip-Pfeil rechts funktioniert) */
.sidebar-icon-item.active:not(:hover)::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0 2px 2px 0;
    z-index: 1;
}

.sidebar-icon-item.active i svg,
.sidebar-icon-item.active i svg path {
    stroke-width: 2.5;
    /* Dicker, voller für aktive Icons */
}

/* Inaktive Icons: Grau/outline */
.sidebar-icon-item:not(.active) {
    color: rgba(255, 255, 255, 0.3);
}

.sidebar-icon-item:not(.active) i svg,
.sidebar-icon-item:not(.active) i svg path {
    stroke-width: 1.5;
    /* Dünner, outline für inaktive Icons */
}

.sidebar-icon-item i {
    width: 7.4px;
    /* 15% kleiner (8.7px * 0.85 = 7.395px) */
    height: 7.4px;
    /* 15% kleiner (8.7px * 0.85 = 7.395px) */
}

.sidebar-icon-item i svg {
    width: 7.4px;
    height: 7.4px;
}

/* Saint Icon - Überschreibt allgemeine Icon-Regeln */
#sandwich-menu-btn img.saint-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: block !important;
}

/* Sandwich Menu Button - On Top Design */
#sandwich-menu-btn {
    margin-top: 1.5px !important;
    /* Vertikal MITTE aligned mit Kundenname: 13.5px - 12px (icon-bar padding-top) */
    margin-bottom: 16px !important;
    /* Mehr Abstand nach unten */
    padding: 8px !important;
    /* Mehr Padding für bessere Sichtbarkeit */
    border-radius: 6px;
    position: relative;
    align-self: center;
    /* Horizontal mittig */
    width: 36px !important;
    /* Größere Breite für bessere Sichtbarkeit */
    height: 36px !important;
    /* Größere Höhe für bessere Sichtbarkeit */
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Trennlinie nach Sandwich-Icon */
#sandwich-menu-btn::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    display: block;
}

/* Saint Icon - IMMER sichtbar, auch beim ersten Load */
/* Stelle sicher, dass das Icon-SVG sofort sichtbar ist */
#sandwich-menu-btn .saint-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain;
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Saint-Icon besser sichtbar machen */
#sandwich-menu-btn:not(.active) .saint-icon {
    opacity: 0.6 !important;
    /* Heller als andere inaktive Icons (0.3) */
}

#sandwich-menu-btn.active .saint-icon {
    opacity: 1 !important;
}

/* Saint-Icon Hover-Effekt */
#sandwich-menu-btn:hover .saint-icon {
    opacity: 1 !important;
}

#sandwich-menu-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: scale(1.05);
}

#sandwich-menu-btn:active {
    transform: scale(0.98);
}

/* Logo-Styles entfernt - verwenden jetzt Lucide Icon */

/* Sparkles Icon - gleiche Größe wie andere Icons, kein Rahmen */
.sidebar-icon-item[data-tooltip="Sourcing Intelligence"] svg {
    width: 20px !important;
    height: 24px !important;
}

/* Default stroke-width für Icons ohne spezifische Klasse */
.sidebar-icon-item i svg path {
    stroke-width: 1.5;
    /* Default für inaktive Icons */
}

/* Tooltip für Sidebar Icons (nur wenn NICHT expanded) - Beeindruckende Effekte */
.sidebar-icon-bar:not(.expanded) .sidebar-icon-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    margin-left: 12px;
    padding: 8px 14px;
    background: linear-gradient(135deg,
            rgba(28, 28, 30, 0.98) 0%,
            rgba(20, 20, 22, 0.98) 100%);
    color: var(--gh-text-primary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateX(-15px) scale(0.9);
    z-index: 1000;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 20px rgba(40, 167, 69, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Tooltip Text bei Hover - Beeindruckende Animation */
.sidebar-icon-bar:not(.expanded) .sidebar-icon-item:hover::after {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        0 0 30px rgba(40, 167, 69, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    animation: tooltipGlow 2s ease-in-out infinite;
}

/* Glow-Animation für Tooltip */
@keyframes tooltipGlow {

    0%,
    100% {
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.2),
            0 0 30px rgba(40, 167, 69, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    50% {
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.25),
            0 0 40px rgba(40, 167, 69, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

/* Tooltip Arrow - rechts, nur bei Hover - Beeindruckender Effekt */
.sidebar-icon-item::before {
    content: '';
    position: absolute;
    left: 100%;
    margin-left: 8px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid rgba(28, 28, 30, 0.98);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateX(-15px) scale(0.9);
    z-index: 1001;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Tooltip Arrow bei Hover - Beeindruckende Animation */
.sidebar-icon-item:hover::before {
    content: '';
    position: absolute;
    left: 100%;
    margin-left: 8px;
    top: 50%;
    transform: translateY(-50%) translateX(0) scale(1);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid rgba(28, 28, 30, 0.98);
    opacity: 1;
    pointer-events: none;
    z-index: 1001;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 8px rgba(40, 167, 69, 0.3));
    animation: arrowGlow 2s ease-in-out infinite;
}

/* Arrow Glow-Animation */
@keyframes arrowGlow {

    0%,
    100% {
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 8px rgba(40, 167, 69, 0.3));
    }

    50% {
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 12px rgba(40, 167, 69, 0.5));
    }
}

/* Haupt-Sidebar-Inhalt */
.sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-width: 0;
    transition: margin-left 0.2s ease;
    background: var(--gh-bg-secondary, rgba(28, 28, 30, 0.7));
    /* Gleicher Hintergrund wie Sidebar-Nav */
}

/* Verschiebe Hauptmenü nach rechts, wenn Icon-Bar ausgeklappt ist */
/* Die Sidebar-Nav wird automatisch breiter durch die expanded Icon-Bar (47px → 200px = +153px) */
/* Sidebar-Nav passt sich automatisch an die breitere Icon-Bar an */
/* Das Hauptmenü (.sidebar-content) rutscht automatisch nach rechts */
/* Note: CSS-Regel nicht nötig, da Flex-Layout automatisch passt */

.sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    box-sizing: border-box;
}

.sidebar-header-text {
    display: flex;
    align-items: center;
    flex: 1;
}

/* .sidebar-back-btn removed - Back arrow no longer used */

.sidebar-title {
    display: flex;
    align-items: center;
}

/* Tenant Dropdown - Hidden by default, shown only when user is logged in */
.tenant-dropdown {
    position: relative;
    width: 100%;
    /* display: none removed - controlled via JavaScript in updateTenantDropdownVisibility() */
}

#sidebar-company-name {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

#sidebar-company-name:hover {
    opacity: 0.8;
}

/* Tenant Dropdown Menu - Liquid Glass Design */
.tenant-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.tenant-dropdown-menu::before {
    display: none;
}

.tenant-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--gh-text-primary);
    font-size: 10pt;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

.tenant-dropdown-item:hover {
    background: var(--gh-bg-tertiary);
    color: var(--accent-green);
}

.tenant-dropdown-item.active {
    background: var(--gh-bg-tertiary);
    color: var(--accent-green);
    font-weight: 600;
}

/* New Tenant Button */
.tenant-dropdown-item.new-tenant-btn {
    background: linear-gradient(135deg,
            rgba(40, 167, 69, 0.15) 0%,
            rgba(40, 167, 69, 0.1) 100%);
    border-color: rgba(40, 167, 69, 0.3);
    color: var(--color-green-primary);
    font-weight: 700;
    text-align: center;
}

.tenant-dropdown-item.new-tenant-btn:hover {
    background: linear-gradient(135deg,
            rgba(40, 167, 69, 0.25) 0%,
            rgba(40, 167, 69, 0.2) 100%);
    border-color: rgba(40, 167, 69, 0.5);
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(40, 167, 69, 0.3),
        0 0 0 1px rgba(40, 167, 69, 0.2) inset;
}

.tenant-dropdown-separator {
    display: none;
}

.sidebar-title h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--gh-text-primary);
    line-height: 1.2;
}

.sidebar-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--gh-bg-tertiary), var(--gh-bg-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-title {
    min-width: 0;
}

.sidebar-title h1 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gh-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-title p {
    font-size: 12px;
    color: var(--gh-text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-salesystems-text {
    font-size: 8pt;
    color: var(--gh-text-primary);
    margin: 0;
    /* Entferne margin für bessere Ausrichtung */
    text-align: left;
    line-height: 20px;
    /* Feste line-height für vertikale Ausrichtung */
    height: 20px;
    /* Gleiche Höhe wie breadcrumb und user-name-display */
    display: inline-flex;
    /* Flexbox für vertikale Zentrierung */
    align-items: center;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    padding: 8px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--gh-border);
    color: var(--gh-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.theme-toggle-btn:hover {
    background-color: var(--gh-bg-secondary);
    border-color: var(--gh-border-hover);
    color: var(--gh-text-primary);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

.theme-toggle-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Liquid Glass Toggle Button - Entfernt (Liquid Glass ist jetzt Standard) */

/* Footer Toggle Buttons */
.footer-toggle-btn {
    padding: 6px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--gh-border);
    color: var(--gh-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: 0;
}

.footer-toggle-btn:hover {
    background-color: var(--gh-bg-secondary);
    border-color: var(--ios-blue-primary);
    color: var(--ios-blue-primary);
    transform: translateY(-1px);
}

.footer-toggle-btn:active {
    transform: translateY(0) scale(0.95);
}

.footer-toggle-btn i {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sound Toggle Footer (Icon only) */
.sound-toggle-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--gh-border);
    background: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    line-height: 1;
}

.sound-toggle-footer:hover {
    background-color: var(--gh-bg-secondary);
    border-color: var(--ios-blue-primary);
    color: var(--ios-blue-primary);
    transform: translateY(-1px);
}

.sound-toggle-footer:active {
    transform: translateY(0) scale(0.95);
}

.sound-toggle-footer #sound-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
}

/* Sound Toggle - Aktiv/Inaktiv States */
#sound-toggle-footer.sound-enabled {
    background: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    color: var(--ios-blue-primary, #28A745);
}

#sound-toggle-footer.sound-enabled:hover {
    background: rgba(40, 167, 69, 0.25);
    border-color: var(--ios-blue-primary, #28A745);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

#sound-toggle-footer.sound-disabled {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.2);
    color: var(--color-warning);
    opacity: 0.6;
    position: relative;
}

#sound-toggle-footer.sound-disabled i {
    position: relative;
}

/* Durchgestrichener Lautsprecher für disabled */
#sound-toggle-footer.sound-disabled i::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%) rotate(-45deg);
    opacity: 0.8;
}

#sound-toggle-footer.sound-disabled:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: var(--color-warning);
    opacity: 1;
}

/* Metric Trend Bar - Absolute Zahlen statt Prozent */
.metric-trend-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    min-height: 36px;
}

.trend-bar-line {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.trend-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--positive-green) 0%, rgba(40, 167, 69, 0.7) 100%);
    border-radius: 2px;
    transition: width 0.6s ease;
}

.trend-bar-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--gh-text-secondary);
}

.trend-bar-label {
    font-weight: 500;
}

.trend-bar-value {
    font-weight: 700;
    color: var(--positive-green);
}

.trend-bar-date {
    font-weight: 400;
    opacity: 0.7;
    margin-left: auto;
}

/* Theme Toggle - Dark/Light Mode unterschiedliche Anzeige */
#theme-toggle-footer.theme-dark {
    background: rgba(28, 28, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

#theme-toggle-footer.theme-dark:hover {
    background: rgba(28, 28, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 1);
}

#theme-toggle-footer.theme-light {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(28, 28, 30, 0.2);
    color: rgba(28, 28, 30, 0.9);
}

#theme-toggle-footer.theme-light:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(28, 28, 30, 0.4);
    color: rgba(28, 28, 30, 1);
}

/* Wings Button Footer */
.wings-btn .wings-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--gh-text-secondary);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.wings-btn .wings-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wings-btn:hover .wings-icon {
    color: var(--ios-blue-primary);
}

/* Navigation Items */
.sidebar-nav-items {
    flex: 1;
    padding: 8px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--gh-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 16px 0 12px 0;
    padding: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    /* Visuelle Styles wurden nach liquid-glass.css verschoben */
    transition: all 0.15s ease;
    text-decoration: none;
    cursor: pointer;
}

/* Onboarding mode: Hide nav items */
.nav-item.onboarding-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Onboarding mode: Disabled nav items (for logged in normal users) */
.nav-item.disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Hover und Active Styles wurden nach liquid-glass.css verschoben */

.nav-item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.nav-item-icon i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.nav-item-content {
    flex: 1;
    min-width: 0;
}

.nav-item-label {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--gh-text-primary);
}

.nav-item-description {
    font-size: 12px;
    color: var(--gh-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item-badge {
    background: rgba(139, 92, 246, 0.2);
    color: var(--purple-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
    margin-left: auto;
}

/* Review Indicator - Grüner blinkender Punkt */
.review-indicator {
    display: none;
    width: 10px;
    height: 10px;
    background: var(--accent-green, #28A745);
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
}

.review-indicator-blink {
    animation: reviewIndicatorBlink 1.5s ease-in-out infinite;
}

@keyframes reviewIndicatorBlink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}

.sidebar-footer {
    margin-top: auto;
}

/* Main Content Area */
.main-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    min-width: 0;
}

@media (max-width: 768px) {
    .main-content-area {
        width: 100%;
        margin-left: 0;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 72px;
        /* Platz für Mobile-Menu-Button */
    }
}

/* Top Header Bar */
.top-header {
    flex-shrink: 0;
    /* Visuelle Styles wurden nach liquid-glass.css verschoben */
    padding: 16px;
    min-height: 64px;
    box-sizing: border-box;
}

.top-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 0;
    min-height: 77px;
    position: relative;
    /* Alle Elemente vertikal zentrieren */
    align-items: center;
}

.dashboard-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.recent-intel-header,
.intelligence-overview-header {
    margin-bottom: 16px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--gh-text-secondary);
    line-height: 20px;
    /* Feste line-height für vertikale Ausrichtung */
    height: 20px;
    /* Gleiche Höhe wie user-name-display und sidebar-salesystems-text */
    display: inline-flex;
    /* Flexbox für vertikale Zentrierung */
}

.breadcrumb span:last-child {
    color: var(--gh-text-primary);
}

.header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    justify-content: flex-end;
    align-self: flex-end;
}


.header-action-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(10, 20, 30, 0.7), var(--bg-overlay-50));
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    color: var(--gh-text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-action-btn:hover {
    background: var(--gh-bg-secondary);
    border-color: var(--gh-border);
    color: var(--gh-text-primary);
}

/* Page Content */
.page-content {
    flex: 1;
    overflow: visible !important;
    padding: 20px;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gh-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--gh-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gh-border-hover);
}

/* Duplicate .gitHub-card definition removed - using the one at line 65 */

/* Legacy Content Wrapper (für Kompatibilität) */
.content-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 30px;
}

.fixed-header {
    display: none;
    /* Wird durch Sidebar + Top Header ersetzt */
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    border-bottom: 1px solid var(--gh-border);
}

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

.company-name {
    font-weight: 700;
    color: var(--gh-text-primary);
    font-size: 1.1em;
}

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

.salesystems-logo {
    font-size: 0.9em;
    color: var(--gh-text-primary) !important;
}

.salesystems-logo * {
    color: var(--gh-text-primary) !important;
}

.salesystems-logo .opacity-07 {
    opacity: 1 !important;
    color: var(--gh-text-primary) !important;
}

.salesystems-logo .text-accent-green {
    color: var(--gh-text-primary) !important;
}

.salesystems-logo sup {
    color: var(--gh-text-primary) !important;
}

.driven-by {
    font-size: 0.8em;
    margin-right: 5px;
}

.logo-y {
    color: var(--gh-text-primary);
}

.main-nav {
    display: flex;
    gap: 5px;
    padding: 10px 30px;
    border-bottom: 1px solid var(--gh-border);
}

.main-tab {
    padding: 10px 20px;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    color: var(--gh-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em;
    font-weight: 500;
}

.main-tab:hover {
    background: var(--gh-bg-secondary);
    border-color: var(--gh-border);
    color: var(--gh-text-primary);
}

.main-tab.active {
    background: var(--gh-bg-tertiary);
    border-color: var(--gh-border);
    color: var(--gh-text-primary);
    box-shadow: none;
}

.live-indicator {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: rgba(255, 87, 34, 0.1);
    border: 1px solid var(--accent-orange-20);
    border-radius: 8px;
    color: var(--accent-orange);
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #ff5722;
    border-radius: 50%;
    animation: pulseOpacity 2s infinite;
}

@keyframes pulseOpacity {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.page-nav {
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title {
    font-size: 1.8em;
    font-weight: 700;
    background: var(--gh-bg-tertiary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.main-content-wrapper {
    display: none;
    padding: 0;
}

.main-content-wrapper.active {
    display: block !important;
}

/* Remove margin-top from content sections since we have sidebar now */
#dashboard-content,
#news-content,
#review-content,
#analytics-content,
#tables-content,
#admin-content,
#tickets-content {
    margin-top: 0;
}

/* DASHBOARD METRICS */

.hero-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--card-spacing);
    margin-bottom: 24px;
}

/* .metric-card Styles wurden nach liquid-glass.css verschoben */

.metric-value {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--gh-text-primary);
    margin-bottom: 8px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.metric-value-total {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--gh-text-primary);
    margin-bottom: 4px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.metric-value-period {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--gh-text-secondary);
    margin-bottom: 8px;
    line-height: 1;
    opacity: 0.9;
    font-variant-numeric: tabular-nums;
}

.metric-analysis {
    font-size: 0.85em;
    color: var(--gh-text-secondary);
    margin-top: 4px;
    font-weight: 500;
}

.metric-label {
    font-size: 12px;
    color: var(--gh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    /* Max 23 Zeichen für Badge-Überschriften (MANDATORY) */
    max-width: 23ch;
    /* 23 Zeichen */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-change {
    display: inline-block;
    padding: 4px 10px;
    background: var(--gh-bg-tertiary);
    border: 1px solid var(--gh-border);
    border-radius: 4px;
    color: var(--gh-text-primary);
    font-size: 12px;
    font-weight: 600;
}

.metric-status {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    margin-top: 10px;
}

.metric-status.status-good {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    border: 1px solid var(--gh-border);
}

.metric-status.status-moderate {
    background: var(--gh-bg-tertiary);
    color: var(--accent-yellow);
    border: 1px solid var(--gh-border);
}

.metric-status.status-poor {
    background: var(--gh-bg-tertiary);
    color: var(--accent-red);
    border: 1px solid var(--gh-border);
}

/* NEWS METRIC CARDS (Sidebar) */

.news-metric-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

/* Enhanced Metric Cards (Hero Section Design) */
.metric-card-enhanced {
    background: rgba(28, 28, 30, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--ios-blue-primary);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 20px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 180px;
}

.metric-card-compact {
    background: rgba(28, 28, 30, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--ios-blue-primary);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 12px;
    padding: 12px 14px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.metric-card-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    pointer-events: none;
    z-index: 0;
}

.metric-card-compact>* {
    position: relative;
    z-index: 1;
}

.metric-card-compact:hover {
    background: rgba(28, 28, 30, 0.1);
    border-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.metric-card-compact .metric-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.metric-card-compact .metric-icon {
    width: 16px;
    height: 16px;
    color: var(--gh-text-secondary);
    flex-shrink: 0;
}

.metric-card-compact .metric-icon i {
    width: 16px;
    height: 16px;
}

.metric-card-compact .metric-label {
    font-size: 10px;
    color: var(--gh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    font-weight: 600;
}

.metric-card-compact .metric-value-wrapper {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.metric-card-compact .metric-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--gh-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.metric-card-compact .metric-value-total {
    font-size: 18px;
}

.metric-card-compact .metric-value-period {
    font-size: 14px;
    color: var(--gh-text-secondary);
    opacity: 0.8;
}

.metric-card-compact .metric-value-separator {
    color: var(--gh-text-tertiary);
    font-size: 12px;
    opacity: 0.5;
}

.metric-card-compact .metric-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    margin-top: 4px;
}

.metric-card-compact .trend-arrow {
    font-size: 10px;
}

.metric-card-compact .trend-value {
    font-weight: 600;
    color: var(--gh-text-secondary);
}

.metric-card-compact.metric-card-blue {
    border-left-color: #007AFF;
}

.metric-card-compact.metric-card-blue .metric-icon {
    color: #007AFF;
}

/* Enhanced Card Styles */
.metric-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    pointer-events: none;
    z-index: 0;
}

.metric-card-enhanced>* {
    position: relative;
    z-index: 1;
}

.metric-card-enhanced:hover {
    background: rgba(28, 28, 30, 0.12);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.metric-card-enhanced .metric-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.metric-card-enhanced .metric-icon {
    width: 24px;
    height: 24px;
    color: var(--gh-text-secondary);
    flex-shrink: 0;
    opacity: 0.8;
}

.metric-card-enhanced .metric-icon i {
    width: 20px;
    height: 20px;
}

.metric-card-enhanced .metric-label {
    font-size: 11px;
    color: var(--gh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0;
    font-weight: 600;
    opacity: 0.7;
}

.metric-card-enhanced .metric-trend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
}

.metric-card-enhanced .trend-arrow {
    color: var(--positive-green);
    font-size: 14px;
}

.metric-card-enhanced .trend-arrow.down {
    color: #ef4444;
}

.metric-card-enhanced .trend-value {
    color: var(--gh-text-secondary);
    font-size: 13px;
}

.metric-card-enhanced .metric-mini-graph {
    width: 100%;
    height: 36px;
    margin-bottom: 12px;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.metric-card-enhanced .metric-mini-graph svg {
    width: 100%;
    height: 100%;
}

.metric-card-enhanced .metric-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
}

.metric-card-enhanced .metric-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--positive-green) 0%, rgba(16, 185, 129, 0.6) 100%);
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.metric-card-enhanced .metric-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.metric-card-enhanced .metric-score-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.metric-card-enhanced .score-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--positive-green) 0%, var(--positive-green) var(--score-percent, 0%), rgba(255, 255, 255, 0.1) var(--score-percent, 0%), rgba(255, 255, 255, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.metric-card-enhanced .score-circle::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(28, 28, 30, 0.9);
}

.metric-card-enhanced .score-label {
    font-size: 11px;
    color: var(--gh-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.metric-card-enhanced .metric-pie-chart {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-card-enhanced .pie-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.metric-card-enhanced .pie-fill {
    transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.metric-card-enhanced .pie-value {
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    color: var(--gh-text-primary);
    text-align: center;
}

.metric-card-enhanced .metric-value-wrapper {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: auto;
    margin-bottom: 8px;
}

.metric-card-enhanced .metric-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--gh-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.metric-card-enhanced .metric-value-total {
    font-size: 22px;
}

.metric-card-enhanced .metric-value-separator {
    font-size: 16px;
    font-weight: 400;
    color: var(--gh-text-tertiary);
    opacity: 0.5;
}

.metric-card-enhanced .metric-value-period {
    font-size: 16px;
    font-weight: 500;
    color: var(--gh-text-secondary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin: 0;
}

.metric-card-enhanced .metric-analysis {
    font-size: 11px;
    color: var(--gh-text-tertiary);
    opacity: 0.7;
    margin-top: 4px;
    font-weight: 500;
}

/* Colored Enhanced Cards */
.metric-card-enhanced.metric-card-blue {
    border-left-color: #007AFF;
}

.metric-card-enhanced.metric-card-blue .metric-icon {
    color: #007AFF;
}

.metric-card-enhanced.metric-card-blue::before {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(0, 122, 255, 0.05) 100%);
}

.metric-card-enhanced.metric-card-orange {
    border-left-color: #FF9500;
}

.metric-card-enhanced.metric-card-orange .metric-icon {
    color: #FF9500;
}

.metric-card-enhanced.metric-card-orange::before {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.15) 0%, rgba(255, 149, 0, 0.05) 100%);
}

.metric-card-enhanced.metric-card-orange .metric-progress-fill {
    background: linear-gradient(90deg, #FF9500 0%, rgba(255, 149, 0, 0.6) 100%);
}

.metric-card-enhanced.metric-card-orange .score-circle {
    background: conic-gradient(from 0deg, #FF9500 0%, #FF9500 var(--score-percent, 0%), rgba(255, 255, 255, 0.1) var(--score-percent, 0%), rgba(255, 255, 255, 0.1) 100%);
}

.metric-card-enhanced.metric-card-green {
    border-left-color: #28A745;
}

.metric-card-enhanced.metric-card-green .metric-icon {
    color: #28A745;
}

.metric-card-enhanced.metric-card-green::before {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(40, 167, 69, 0.05) 100%);
}

.metric-card-enhanced.metric-card-green .metric-progress-fill {
    background: linear-gradient(90deg, #28A745 0%, rgba(40, 167, 69, 0.6) 100%);
}

.metric-card-enhanced.metric-card-purple {
    border-left-color: #AF52DE;
}

.metric-card-enhanced.metric-card-purple .metric-icon {
    color: #AF52DE;
}

.metric-card-enhanced.metric-card-purple::before {
    background: linear-gradient(135deg, rgba(175, 82, 222, 0.15) 0%, rgba(175, 82, 222, 0.05) 100%);
}

.metric-card-enhanced.metric-card-purple .pie-fill {
    color: #AF52DE;
}

/* DASHBOARD SECTIONS */

/* Dashboard Layout: News 70% / Analytics 30% (MANDATORY) */
#dashboard-content .main-content {
    display: grid !important;
    grid-template-columns: 7fr 3fr !important;
    /* 70% News / 30% Analytics */
    grid-template-rows: auto !important;
    /* Eine Zeile - beide Sektionen starten gleich */
    gap: 24px;
    margin-top: 0;
    margin-bottom: 24px;
    align-items: start !important;
    /* Beide Sektionen starten oben */
    /* Keine feste Höhe - Seite scrollt */
    overflow: visible;
}

/* Höhenverhältnisse:
 * - News (recent-intel): 2fr von 3fr = 66.6% der linken Spalte = 50% der Gesamthöhe (2fr von 3fr Spalten × 2fr von 3fr Zeilen)
 * - Intelligence Overview: 1fr von 3fr = 33.3% der linken Spalte = 25% der Gesamthöhe (2fr von 3fr Spalten × 1fr von 3fr Zeilen)
 * - Key Metrics: Nimmt beide Zeilen (2fr + 1fr = 3fr) in rechter Spalte (1fr von 3fr) = 33.3% der Gesamthöhe
 *
 * Ziel: News 50%, Intelligence Overview 25%, Key Metrics 25%
 * Aktuell: News 50%, Intelligence Overview 25%, Key Metrics 33.3%
 *
 * Lösung: Key Metrics sollte nur 1 Zeile nehmen, nicht beide
 */

/* Höhenverhältnisse:
 * - News (recent-intel): 50% der Gesamthöhe (2fr von 3fr = 66.6% der linken Spalte, aber 50% der Gesamthöhe)
 * - Intelligence Overview: 25% der Gesamthöhe (1fr von 3fr = 33.3% der linken Spalte, aber 25% der Gesamthöhe)
 * - Key Metrics: 25% der Gesamthöhe (nimmt beide Zeilen der rechten Spalte)
 *
 * Aktuell: grid-template-rows: 2fr 1fr
 * - Zeile 1: 2fr (66.6% der Gesamthöhe) -> News
 * - Zeile 2: 1fr (33.3% der Gesamthöhe) -> Intelligence Overview
 * - Key Metrics: grid-row: 1 / 3 (nimmt beide Zeilen = 100% der rechten Spalte)
 *
 * Problem: News ist 66.6%, sollte 50% sein
 * Lösung: grid-template-rows: 1.5fr 0.75fr (50% / 25%)
 */

/* No Data Banner - Liquid Glass Design wie News Badges */
.no-data-banner {
    width: 100%;
    margin-bottom: 8px;
    background: rgba(28, 28, 30, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--ios-blue-primary);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 12px 16px;
    order: 1;
    /* Nach Titel, vor Feed */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: var(--lg-shadow-combined);
    overflow: hidden;
}

.no-data-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.03) 20%,
            transparent 40%);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
    z-index: 1;
}

.no-data-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: var(--lg-layer-overlay);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
    z-index: 0;
}

.no-data-banner>* {
    position: relative;
    z-index: 2;
}

.no-data-banner:hover {
    border-color: var(--ios-blue-primary);
    background: rgba(35, 35, 40, 0.75);
    box-shadow: var(--lg-shadow-hover-combined);
    transform: translateY(-2px) scale(1.01);
}

.dark .no-data-banner {
    background: rgba(28, 28, 30, 0.06);
    border-color: rgba(255, 255, 255, 0.02);
}

.dark .no-data-banner:hover {
    background: rgba(35, 35, 40, 0.75);
    border-color: var(--ios-blue-primary);
}

.no-data-banner-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.no-data-banner-text {
    color: var(--gh-text-primary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.no-data-banner-button {
    padding: 6px 12px;
    background: var(--lg-layer-base);
    border: 1px solid var(--lg-border);
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    border-radius: var(--lg-border-radius);
    color: var(--ios-blue-primary);
    font-size: var(--font-size-footnote);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    align-self: flex-start;
    box-shadow: var(--lg-shadow-combined);
}

.no-data-banner-button:hover {
    background: rgba(35, 35, 40, 0.75);
    border-color: var(--ios-blue-primary);
    box-shadow: var(--lg-shadow-hover-combined);
    transform: translateY(-1px);
}

.no-data-banner-button i {
    width: 16px;
    height: 16px;
}

/* News: Links, 70% Breite, volle Höhe (spannt beide Zeilen) */
.recent-intel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    /* Gleiche Zeile wie key-metrics = gleiche Starthöhe */
    background: rgba(28, 28, 30, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 0;
    margin-top: 0 !important;
    transition: all 0.2s ease;
    align-self: start !important;
    /* Startet oben, nicht gestreckt */
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}

/* Content in News-Sektion: Volle Höhe */
.recent-intel #recent-feed {
    flex: 1;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    order: 2;
    /* Nach Banner */
}

.recent-intel .intel-item {
    flex-shrink: 0;
}

/* Intel: Rechts oben, 30% Breite, halbe Höhe (Zeile 1) */
.intelligence-overview {
    grid-column: 2 !important;
    grid-row: 1 !important;
    /* Obere Zeile = halbe Höhe */
    background: rgba(28, 28, 30, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 0;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}

/* Content in Intel-Sektion: Volle Höhe */
.intelligence-overview #chart-container {
    flex: 1;
    overflow: visible;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.intelligence-overview .overview-tabs {
    flex-shrink: 0;
}

.intelligence-overview .section-title {
    flex-shrink: 0;
}

/* Metrics: Rechts, 30% Breite, gleiche Starthöhe wie News */
#news-content .key-metrics,
.key-metrics {
    grid-column: 2 !important;
    grid-row: 1 !important;
    /* Gleiche Zeile wie recent-intel = gleiche Starthöhe */
    background: rgba(28, 28, 30, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 24px !important;
    /* Gleiches Padding wie recent-intel */
    margin-bottom: 0;
    margin-top: 0 !important;
    transition: all 0.2s ease;
    align-self: start !important;
    /* Startet oben, nicht gestreckt */
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}

.key-metrics>.section-title {
    flex-shrink: 0 !important;
    order: 1 !important;
}

.key-metrics>.analytics-badge {
    flex-shrink: 0 !important;
    order: 2 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    align-self: stretch !important;
    /* Stretch statt flex-start für volle Breite */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    /* Zusätzliche Sicherheit */
    box-sizing: border-box !important;
}

.key-metrics>.circle-chart {
    flex-shrink: 0 !important;
    order: 2 !important;
}

.key-metrics>.news-metric-cards {
    flex-shrink: 0 !important;
    order: 3 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.key-metrics>.metrics-list {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    order: 4 !important;
    margin-bottom: 20px !important;
}

.key-metrics>.top-sources {
    flex-shrink: 0 !important;
    order: 5 !important;
    margin-top: 0 !important;
}

.key-metrics .section-title {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 600;
}

.recent-intel:hover,
.intelligence-overview:hover,
.key-metrics:hover {
    border-color: rgba(255, 255, 255, 0.05);
    background: rgba(28, 28, 30, 0.1);
}

.dark .recent-intel,
.dark .intelligence-overview,
.dark .key-metrics {
    background: rgba(28, 28, 30, 0.06);
    border-color: rgba(255, 255, 255, 0.02);
}

.dark .recent-intel:hover,
.dark .intelligence-overview:hover,
.dark .key-metrics:hover {
    background: rgba(35, 35, 40, 0.75);
    border-color: rgba(255, 255, 255, 0.05);
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gh-text-primary);
    margin-bottom: 20px;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
}

.key-metrics .section-title {
    font-size: 14px;
    margin-bottom: 16px;
}

.overview-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.tab-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(10, 20, 30, 0.7), var(--bg-overlay-50));
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    color: var(--gh-text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tab-btn:hover {
    background: var(--gh-bg-secondary);
    border-color: var(--gh-border-hover);
    color: var(--gh-text-primary);
}

.tab-btn.active {
    background: var(--gh-bg-tertiary);
    border-color: var(--gh-border-hover);
    color: var(--gh-text-primary);
    box-shadow: none;
}

.circle-chart {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
    flex-shrink: 0;
}

.circle-progress {
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: var(--gh-border);
    stroke-width: 10;
    opacity: 0.15;
}

.circle-fill {
    fill: none;
    stroke: var(--ios-blue-primary, #28A745);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: var(--offset, 314);
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: stroke-dashoffset;
    transform: translateZ(0);
    filter: drop-shadow(0 0 3px rgba(40, 167, 69, 0.4));
}

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

.circle-value {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--gh-text-primary);
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.circle-label {
    font-size: 0.75em;
    color: var(--gh-text-secondary);
    margin-top: 4px;
    opacity: 0.8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metrics-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
}

.metric-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
    min-height: 32px;
}

.metric-row-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.metric-row:hover {
    background: rgba(40, 167, 69, 0.08);
    border-color: rgba(40, 167, 69, 0.25);
    transform: translateX(2px);
}

.metric-row-label {
    color: var(--gh-text-secondary);
    font-size: 11px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.85;
}

.metric-row-value {
    color: var(--ios-blue-primary, #28A745);
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.2px;
}

.metric-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.metric-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(40, 167, 69, 0.6), rgba(40, 167, 69, 0.9));
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
    width: 0%;
}

/* Progress bars in Hero Section Metric Cards */
.metric-card .metric-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin: 8px 0;
    overflow: hidden;
    position: relative;
}

.metric-card .metric-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(40, 167, 69, 0.6), rgba(40, 167, 69, 0.9));
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
    width: 0%;
}

@media (max-width: 1400px) {
    .hero-section {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr;
    }

    .content-wrapper {
        padding: 0 15px;
    }

    .header,
    .main-nav,
    .page-nav {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Sidebar: Auf Mobile als Overlay-Menu */
    .sidebar-nav {
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh;
        width: 280px !important;
        max-width: 85vw !important;
        min-width: 200px !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        box-shadow: var(--lg-shadow-combined);
    }

    .sidebar-nav.mobile-open {
        transform: translateX(0);
    }

    .sidebar-resize-handle {
        display: none;
    }

    /* Backdrop Overlay für Sidebar */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar-backdrop.active {
        display: block;
        opacity: 1;
    }

    /* Mobile Menu Toggle Button */
    /* Base: Versteckt auf Desktop */
    .mobile-menu-toggle {
        display: none;
    }

    @media (max-width: 1024px) {

        /* Mobile: Sichtbar */
        .mobile-menu-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 16px;
            left: 16px;
            width: 44px;
            height: 44px;
            background: var(--lg-layer-base);
            border: 1px solid var(--lg-border);
            border-radius: var(--lg-border-radius);
            backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
            -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
            box-shadow: var(--lg-shadow-combined);
            z-index: 1001;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--gh-text-primary);
        }

        .mobile-menu-toggle:hover {
            background: rgba(35, 35, 40, 0.75);
            border-color: var(--ios-blue-primary);
            box-shadow: var(--lg-shadow-hover-combined);
            transform: translateY(-2px) scale(1.01);
        }

        .mobile-menu-toggle:active {
            transform: scale(0.98);
        }

        .mobile-menu-toggle i {
            width: 20px;
            height: 20px;
            stroke-width: 2;
        }
    }

    /* Dashboard Layout: Vertikales Stack für Mobile */
    #dashboard-content .main-content {
        grid-template-columns: 1fr !important;
        /* Eine Spalte */
        grid-template-rows: auto auto auto !important;
        /* News, Intel, Metrics */
        gap: 16px;
        height: auto !important;
        min-height: auto;
        max-height: none;
        overflow-y: auto;
    }

    #dashboard-content .recent-intel {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #dashboard-content .intelligence-overview {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #dashboard-content .key-metrics {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    /* Hero Section Mobile Optimierung */
    .hero-section {
        grid-template-columns: 1fr !important;
        gap: 12px;
        padding: 16px 0;
    }

    /* Metric Cards Mobile Optimierung */
    .metric-card {
        padding: 16px !important;
        min-height: auto;
    }

    .metric-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Intelligence Overview Mobile Optimierung */
    .intelligence-overview {
        padding: 16px;
    }

    .analytics-bar-item {
        margin-bottom: 12px;
    }

    /* News View Mobile Optimierung */
    .news-container {
        padding: 16px 0;
    }

    .news-list-item {
        padding: 16px;
        margin-bottom: 12px;
    }

    .time-filter-tabs {
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 16px;
    }

    .time-tab {
        flex: 1 1 auto;
        min-width: calc(50% - 4px);
    }

    /* Review View Mobile Optimierung */
    .review-header {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .review-header-buttons {
        flex-wrap: wrap;
        width: 100%;
    }

    .findings-list-item {
        padding: 16px;
        margin-bottom: 12px;
    }

    .sort-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 50vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        margin-top: 0;
    }

    /* Analytics View Mobile Optimierung */
    #analytics-content .performance-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 0;
    }

    .perf-card {
        padding: 18px 20px;
    }

    .glass-metrics {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Tables & Admin Views Mobile Optimierung */
    .table-container,
    #config-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-panel {
        padding: 16px;
    }

    .form-group {
        margin-bottom: 16px;
    }

    input,
    select,
    textarea {
        width: 100%;
        padding: 12px;
    }

    /* Touch-Optimierung */
    button,
    .btn,
    .time-tab {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }

    .nav-item {
        min-height: 56px;
        padding: 12px 16px;
    }

    .sidebar-icon-item {
        width: 48px;
        height: 48px;
    }

    /* Typografie Mobile Optimierung */
    body {
        font-size: 16px;
        /* Min. für Lesbarkeit */
        line-height: 1.5;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    .metric-value {
        font-size: 24px;
    }
}

/* UTILITY CLASSES - Für inline-Style Ersetzung */

/* Layout Utilities */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-col {
    flex-direction: column;
}

.gap-8 {
    gap: 8px;
}

.gap-15 {
    gap: 15px;
}

/* Spacing Utilities */
.p-30 {
    padding: 30px;
}

.p-0-30-30 {
    padding: 0 30px 30px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-40 {
    margin-top: 40px;
}

.mb-10 {
    margin-bottom: 10px;
}

.ml-auto {
    margin-left: auto;
}

/* Text Utilities */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.font-12 {
    font-size: 12px;
}

.font-13 {
    font-size: 13px;
}

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

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

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

.font-24 {
    font-size: 24px;
}

.font-2em {
    font-size: 2em;
}

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

.font-weight-700 {
    font-weight: 700;
}

/* Color Utilities */
.text-accent-green {
    color: var(--gh-text-primary);
}

.text-accent-cyan {
    color: var(--gh-text-primary);
}

.text-accent-orange {
    color: var(--accent-orange);
}

.text-accent-yellow {
    color: var(--accent-yellow);
}

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

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

.text-gh-tertiary {
    color: var(--gh-text-tertiary);
}

/* Background Utilities */
.bg-accent-green-10 {
    background: var(--gh-bg-secondary);
}

.bg-accent-green-20 {
    background: var(--gh-bg-tertiary);
}

.bg-gh-primary {
    background: var(--gh-bg-primary);
}

.bg-gh-secondary {
    background: var(--gh-bg-secondary);
}

.bg-gh-tertiary {
    background: var(--gh-bg-tertiary);
}

/* Border Utilities */
.border-accent-green {
    border: 1px solid var(--gh-border);
}

.border-2-accent-green {
    border: 2px solid var(--gh-border);
}

.border-accent-green-20 {
    border: 1px solid var(--gh-border);
}

/* Size Utilities */
.w-8 {
    width: 8px;
}

.h-8 {
    height: 8px;
}

.w-20 {
    width: 20px;
}

.h-20 {
    height: 20px;
}

.min-w-250 {
    min-width: 250px;
}

/* Position Utilities */
.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

.cursor-pointer {
    cursor: pointer;
}

.user-select-none {
    user-select: none;
}

/* Icon Utilities */
.icon-inline {
    display: inline-block;
    vertical-align: middle;
}

.icon-18 {
    width: 18px;
    height: 18px;
}

.icon-20 {
    width: 20px;
    height: 20px;
}

/* Special Utilities */
.live-dot {
    width: 8px;
    height: 8px;
    background: var(--color-critical);
    border-radius: 50%;
    animation: pulseOpacity 2s ease-in-out infinite;
}

.opacity-07 {
    opacity: 0.7;
}

.opacity-08 {
    opacity: 0.8;
}

/* NETWORK TRACKER ANIMATIONS */

/* Chart Animations */
@keyframes pulse-red {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 40px rgba(220, 38, 38, 0.6);
    }
}

.pulse-red {
    animation: pulse-red 2s ease-in-out infinite;
}

@keyframes pulse-subtle {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
    }
}

.pulse-green {
    /* Legacy support - jetzt subtiler */
    animation: pulse-subtle 2s ease-in-out infinite;
}

/* News Ticker Animations */
@keyframes ticker-item-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ticker-item {
    animation: ticker-item-in 0.3s ease-out;
}

/* Tooltip Animations */
@keyframes tooltip-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.animate-tooltip {
    animation: tooltip-in 0.2s ease-out;
}

/* Pulse Glow for Badges */
@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Toast Slide In Animation */
@keyframes slide-in-right {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-slide-in-right {
    animation: slide-in-right 0.3s ease-out;
}

/* Live Pulse Animation for Indicators - Subtil */
@keyframes live-pulse {

    0%,
    100% {
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    }
}

.live-indicator {
    animation: live-pulse 2s ease-in-out infinite;
}

/* Stagger Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.5s ease-out backwards;
}

.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}

.delay-6 {
    animation-delay: 0.6s;
}

/* Design System Classes */
.glass-card {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    box-shadow: var(--gh-card-shadow-light, none);
}

.dark .glass-card {
    box-shadow: none;
}

.accent-button {
    background: var(--gh-bg-tertiary);
    border: 1px solid var(--gh-border);
    color: var(--gh-text-primary);
    border-radius: 6px;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.accent-button:hover {
    background: var(--gh-bg-secondary);
    border-color: var(--gh-border-hover);
}

.accent-badge {
    background: var(--gh-bg-tertiary);
    color: var(--gh-text-primary);
    border: 1px solid var(--gh-border);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
}

.gh-card {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.gh-card:hover {
    border-color: var(--gh-border-hover);
    background: var(--gh-bg-tertiary);
}

/* Mobile Optimization for Dashboard Cards */
@media (max-width: 768px) {
    .hero-section {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
    }

    .metric-card {
        padding: var(--spacing-md) !important;
    }

    .metric-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .metric-value-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .metric-value-separator {
        display: none;
    }

    .metric-trend,
    .metric-mini-graph {
        display: none;
        /* Hide on mobile for space */
    }

    .metric-analysis {
        font-size: var(--font-size-caption-1);
    }
}

/* ONBOARDING RESPONSIVE HEIGHTS */

.onboarding-grid {
    height: calc(100vh - 180px) !important;
    min-height: 500px;
    max-height: calc(100vh - 100px);
}

/* Tablet: Angepasste Höhe */
@media (max-width: 1400px) {
    .onboarding-grid {
        height: calc(100vh - 140px);
        min-height: 500px;
    }
}

/* Kleinere Tablets */
@media (max-width: 1024px) {
    .onboarding-grid {
        height: calc(100vh - 160px);
        min-height: 450px;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto;
        gap: 12px;
    }

    .onboarding-grid .liquid-card {
        max-height: 50vh;
        min-height: 300px;
    }
}

/* Mobile: Vertikales Layout */
@media (max-width: 768px) {
    .onboarding-grid {
        height: auto;
        min-height: auto;
        max-height: none;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto;
        gap: 12px;
    }

    .onboarding-grid .liquid-card {
        max-height: 60vh;
        min-height: 250px;
    }
}

/* Sehr kleine Bildschirme */
@media (max-height: 700px) {
    .onboarding-grid {
        height: auto;
        min-height: auto;
    }

    .onboarding-grid .liquid-card {
        max-height: 50vh;
        min-height: 200px;
    }
}

/* ONBOARDING LOADER - GLOSSY & BLURRY */

.onboarding-loader-overlay {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.onboarding-loader-card {
    background: rgba(28, 28, 30, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 -1px 0 rgba(0, 0, 0, 0.2) inset !important;
    border-radius: 20px !important;
    position: relative;
    overflow: hidden;
}

.onboarding-loader-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.08) 20%,
            rgba(255, 255, 255, 0.03) 40%,
            transparent 60%);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
    z-index: 1;
}

.onboarding-loader-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.1) 100%);
    border-radius: 20px;
    pointer-events: none;
    z-index: 0;
}

.onboarding-loader-card>* {
    position: relative;
    z-index: 2;
}

/* Responsive Loader */
@media (max-width: 768px) {
    .onboarding-loader-card {
        max-width: 95% !important;
        max-height: calc(100vh - 20px) !important;
        padding: 20px !important;
        border-radius: 16px !important;
    }

    .onboarding-loader-overlay {
        padding: 10px !important;
    }
}

@media (max-height: 700px) {
    .onboarding-loader-card {
        max-height: calc(100vh - 20px) !important;
        padding: 20px !important;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes checkmark {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* TRANSLATION LOADER - LIQUID GLASS DESIGN */

.translation-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .translation-loader-overlay {
    background: rgba(13, 17, 23, 0.8);
}

.translation-loader-card {
    background: rgba(28, 28, 30, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 -1px 0 rgba(0, 0, 0, 0.2) inset !important;
    border-radius: 20px !important;
    padding: 32px;
    max-width: 500px;
    width: 90%;
    position: relative;
    overflow: hidden;
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.translation-loader-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.08) 20%,
            rgba(255, 255, 255, 0.03) 40%,
            transparent 60%);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
    z-index: 1;
}

.translation-loader-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.1) 100%);
    border-radius: 20px;
    pointer-events: none;
    z-index: 0;
}

.translation-loader-card>* {
    position: relative;
    z-index: 2;
}

.translation-loader-card h3 {
    color: var(--gh-text-primary);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    text-align: left;
    flex: 1;
}

.translation-loader-card .liquid-glass-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--gh-text-secondary);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 16px;
    position: relative;
    z-index: 3;
}

.translation-loader-card .liquid-glass-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--ios-blue-primary);
    color: var(--ios-blue-primary);
}

.translation-loader-status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.translation-loader-status-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    opacity: 0.5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.translation-loader-status-item:last-child {
    border-bottom: none;
}

.translation-loader-status-item.active {
    opacity: 1;
}

.translation-loader-status-item.completed {
    opacity: 0.7;
}

.translation-loader-status-item.error {
    opacity: 1;
    color: rgba(220, 53, 69, 0.9);
}

.translation-loader-status-item .status-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.translation-loader-status-item .status-text {
    color: var(--gh-text-primary);
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.translation-loader-status-item .status-step-progress {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1px;
    overflow: hidden;
}

.translation-loader-status-item .status-step-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    border-radius: 1px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}

.translation-loader-status-item.completed .status-step-progress-bar {
    background: linear-gradient(90deg, rgba(40, 167, 69, 0.9), rgba(40, 167, 69, 0.7));
}

.translation-loader-progress {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0;
}

.translation-loader-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    border-radius: 3px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}

.translation-loader-progress-text {
    text-align: center;
    margin-top: 12px;
    color: var(--gh-text-secondary);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

/* Responsive Translation Loader */
@media (max-width: 768px) {
    .translation-loader-card {
        max-width: 95% !important;
        padding: 24px !important;
        border-radius: 16px !important;
    }

    .translation-loader-card h3 {
        font-size: 18px;
    }

    .translation-loader-status-item {
        padding: 10px 12px;
    }

    .translation-loader-status-item .status-text {
        font-size: 13px;
    }
}

/* ONBOARDING INSIGHT CARDS - LIQUID GLASS DESIGN */

@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Insight Item Base Styles - Liquid Glass */
#onboardingProcessStatus .insight-item {
    position: relative;
    overflow: hidden;
}

/* Hover Effect für Insight Cards */
#onboardingProcessStatus .insight-item:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Success Cards - Grün Glow */
#onboardingProcessStatus .insight-item[style*="rgba(40, 167, 69"]:hover {
    box-shadow: 0 8px 24px rgba(40, 167, 69, 0.25), 0 0 0 1px rgba(40, 167, 69, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
}

/* Error Cards - Rot Glow */
#onboardingProcessStatus .insight-item[style*="rgba(220, 53, 69"]:hover {
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.2), 0 0 0 1px rgba(220, 53, 69, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
}

/* AUTHENTICATION & USER MANAGEMENT STYLES */

/* Login Button */
.login-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(40, 167, 69, 0.15);
    border: 1px solid rgba(40, 167, 69, 0.4);
    border-radius: 8px;
    color: var(--accent-green);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.login-btn:hover {
    background: rgba(40, 167, 69, 0.25);
    border-color: rgba(40, 167, 69, 0.6);
}

/* User Menu Container */
.user-menu-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2000;
    /* Ensure clicks work */
    pointer-events: auto;
    /* Enable clicks */
}

/* User Name Display (9pt LINKS neben Avatar) */
.user-name-display {
    font-size: 9pt;
    color: var(--gh-text-primary);
    white-space: nowrap;
    font-weight: 500;
    line-height: 20px;
    /* Feste line-height für vertikale Ausrichtung */
    height: 20px;
    /* Gleiche Höhe wie breadcrumb und sidebar-salesystems-text */
    display: inline-flex;
    /* Flexbox für vertikale Zentrierung */
    align-items: center;
}

/* User Avatar - Schwarz mit Glossy-Effekt (30% kleiner) */
.user-avatar-wrapper {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer !important;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    pointer-events: auto !important;
    /* Force clickable */
    z-index: 2001;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
}

.user-avatar-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 70%);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-avatar-wrapper:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 4px 16px rgba(0, 0, 0, 0.4);
}

.user-avatar-wrapper:hover::before {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 40%, transparent 70%);
}

.user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    /* Zeigt Gesicht (oberer Teil, leicht nach unten verschoben für bessere Zentrierung) */
    cursor: pointer !important;
    pointer-events: auto !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG Text in Avatar zentrieren */
.user-avatar svg text {
    dominant-baseline: central;
    text-anchor: middle;
}

.user-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
    color: var(--accent-green);
    font-weight: 600;
    font-size: 0.9rem;
}

.user-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gh-text-tertiary);
}

/* User Menu Dropdown */
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--gh-bg-tertiary);
}

.user-menu-header .user-menu-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    flex-shrink: 0;
}

.user-menu-header .user-menu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    /* Zeigt Gesicht (oberer Teil, leicht nach unten verschoben für bessere Zentrierung) */
    border-radius: 50%;
}

.user-menu-header .user-menu-avatar .user-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
    color: var(--accent-green);
    font-weight: 600;
    font-size: 1.2rem;
}

.user-menu-header .user-menu-info {
    flex: 1;
    min-width: 0;
}

.user-menu-header .user-menu-name {
    font-size: 10pt;
    font-weight: 600;
    color: var(--gh-text-primary);
    margin-bottom: 2px;
}

.user-menu-header .user-menu-email {
    font-size: 9pt;
    color: var(--gh-text-secondary);
    margin-bottom: 1px;
}

.user-menu-header .user-menu-role {
    font-size: 8pt;
    color: var(--gh-text-tertiary);
    text-transform: uppercase;
}

.user-menu-divider {
    height: 1px;
    background: var(--gh-border);
    margin: 0;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--gh-text-primary);
    font-size: 10pt;
    transition: all 0.2s ease;
}

.user-menu-item:last-child {
    border-bottom: none;
}

.user-menu-item:hover {
    background: var(--gh-bg-tertiary);
    color: var(--accent-green);
}

.user-menu-item i {
    width: 16px;
    height: 16px;
}

/* User Menu Modal */
.user-menu-modal-content {
    max-width: 320px;
    width: 90%;
    padding: 0;
}

.user-menu-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid var(--gh-border);
    background: var(--gh-bg-secondary);
}

.user-menu-modal-items {
    padding: 8px 0;
}

.user-menu-modal-header .user-menu-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    flex-shrink: 0;
}

.user-menu-modal-header .user-menu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    /* Zeigt Gesicht (oberer Teil, leicht nach unten verschoben für bessere Zentrierung) */
}

.user-menu-modal-header .user-menu-avatar .user-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
    color: var(--accent-green);
    font-weight: 600;
    font-size: 1.2rem;
}

.user-menu-modal-header .user-menu-info {
    flex: 1;
    min-width: 0;
}

.user-menu-modal-header .user-menu-name {
    font-size: 10pt;
    font-weight: 600;
    color: var(--gh-text-primary);
    margin-bottom: 4px;
}

.user-menu-modal-header .user-menu-email {
    font-size: 10pt;
    color: var(--gh-text-secondary);
    margin-bottom: 2px;
}

.user-menu-modal-header .user-menu-role {
    font-size: 9pt;
    color: var(--gh-text-tertiary);
    text-transform: uppercase;
}

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

/* Login Modal */
.login-modal-content {
    max-width: 400px;
    width: 90%;
    position: relative;
}

.login-modal-content .modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.login-modal-content .form-group {
    margin-bottom: 20px;
}

.login-modal-content .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gh-text-primary);
}

.login-modal-content .form-group input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--gh-border);
    background: var(--gh-bg-secondary);
    color: var(--gh-text-primary);
    font-size: 0.9rem;
}

.login-modal-content .form-group input:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.error-message {
    padding: 12px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    color: #dc3545;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.success-message {
    padding: 12px;
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: 8px;
    color: var(--accent-green);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* User Profile Modal */
.user-profile-modal-content {
    max-width: 500px;
    width: 90%;
}

.avatar-upload-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--gh-border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gh-bg-secondary);
    flex-shrink: 0;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    /* Zeigt Gesicht (oberer Teil, leicht nach unten verschoben für bessere Zentrierung) */
}

.avatar-preview #profile-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
    color: var(--accent-green);
    font-weight: 600;
    font-size: 1.2rem;
}

.avatar-preview #profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gh-text-tertiary);
}

/* Admin User Management */
.admin-user-management-header {
    margin-bottom: 24px;
}

.admin-user-management-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gh-text-primary);
    margin-bottom: 8px;
}

.admin-user-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-user-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.admin-user-item:hover {
    border-color: var(--accent-green);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.1);
}

.admin-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--gh-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gh-bg-tertiary);
}

.admin-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    /* Zeigt Gesicht (oberer Teil, leicht nach unten verschoben für bessere Zentrierung) */
}

.admin-user-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
    color: var(--accent-green);
    font-weight: 600;
    font-size: 1rem;
}

.admin-user-info {
    flex: 1;
    min-width: 0;
}

.admin-user-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gh-text-primary);
    margin-bottom: 4px;
}

.admin-user-email {
    font-size: 0.9rem;
    color: var(--gh-text-secondary);
    margin-bottom: 4px;
}

.admin-user-role {
    font-size: 0.85rem;
    color: var(--gh-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-user-actions {
    display: flex;
    gap: 8px;
}

.admin-user-empty {
    padding: 40px;
    text-align: center;
    color: var(--gh-text-tertiary);
    font-size: 0.9rem;
}

.admin-error {
    padding: 20px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    color: #dc3545;
    text-align: center;
}

.metric-card-enhanced .metric-value-wrapper {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: auto;
    margin-bottom: 8px;
}

.metric-card-enhanced .metric-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--gh-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.metric-card-enhanced .metric-value-total {
    font-size: 22px;
}

.metric-card-enhanced .metric-value-separator {
    font-size: 16px;
    font-weight: 400;
    color: var(--gh-text-tertiary);
    opacity: 0.5;
}

.metric-card-enhanced .metric-value-period {
    font-size: 16px;
    font-weight: 500;
    color: var(--gh-text-secondary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin: 0;
}


/* FINDINGS BAR CHART - Balken in Balken Design */

.findings-bar-chart {
    height: 60px;
    margin: 12px 0;
    position: relative;
}

.findings-bar-chart .bar-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.findings-bar-chart .bar-total {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

.findings-bar-chart .bar-reviewed {
    background: linear-gradient(90deg, #10B981 0%, #059669 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 10px rgba(16, 185, 129, 0.3);
}

.findings-bar-chart .bar-labels {
    pointer-events: none;
}

.findings-bar-chart .bar-labels span {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ========== CRITICAL FIX: Content Visibility Override ========== */
/* MUST be at END of file to override all other rules */
/* Admin CSS moved to admin.css - loaded dynamically */
#news-content:not(.active),
#analytics-content:not(.active),
#dashboard-content:not(.active),
#review-content:not(.active),
#tables-content:not(.active),
#tickets-content:not(.active),
#onboarding-content:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ========== CRITICAL FIX: Ticket Step Badges ========== */
/* Zeige Häkchen statt Nummer wenn Schritt fertig ist */
.step-item.completed .step-icon {
    font-size: 0 !important;
    /* Verstecke Nummer */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    background-color: #10B981 !important;
    border-color: #10B981 !important;
    color: transparent !important;
}

/* Aktiver Schritt pulsiert */
.step-item.active .step-icon {
    border-color: #3B82F6 !important;
    color: #3B82F6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Text-Wrapping für Step-Titel und Messages (MANDATORY) */
.step-title,
.step-message {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    hyphens: auto;
    max-width: 100%;
}

/* Text-Truncation für Cards, Menüs und Sidebar (MANDATORY für i18n) */
.badge-label,
.badge-header .badge-label,
.sidebar-section-title,
.nav-item-label,
.nav-item-description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Spezielle Truncation für Card-Footer-Texte (längere Beschreibungen) */
.badge-card>div[style*="font-size: 8pt"] {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* Standard property for compatibility */
    -webkit-box-orient: vertical;
    max-height: 2.8em;
    line-height: 1.4;
    word-break: break-word;
    hyphens: auto;
}

/* Badge-Überschriften: Max 23 Zeichen (MANDATORY) */
.metric-label {
    max-width: 23ch !important;
    /* 23 Zeichen */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Card-Titel Truncation (für lange Übersetzungen) */
.badge-label,
.badge-header .badge-label {
    max-width: min(23ch, calc(100% - 60px));
    /* Max 23 Zeichen ODER Platz für Icon + Info-Icon */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Core KPI Labels: Max 15 Zeichen (MANDATORY) */
.metric-key-label {
    max-width: 15ch !important;
    /* 15 Zeichen */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
}

.badge-key-label {
    max-width: 15ch;
    /* 15 Zeichen */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

/* =================================================== */
/* VIDEO OVERLAY FOR ONBOARDING */
/* =================================================== */

.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure background content (menus, sidebar) is visible but blurred */
body:has(#video-overlay[style*="flex"]) .sidebar,
body:has(#video-overlay[style*="flex"]) .header,
body:has(#video-overlay[style*="flex"]) .main-content {
    opacity: 0.3;
    pointer-events: none;
}

.video-overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.video-overlay-content {
    position: relative;
    z-index: 100000;
    width: 90%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    background: var(--gh-bg-primary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-container iframe,
.video-container video {
    width: 100%;
    height: 100%;
    border: none;
}

.video-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--gh-border);
    border-radius: 50%;
    color: var(--gh-text-primary);
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    transition: all 0.2s ease;
}

.video-close-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: var(--gh-text-primary);
    transform: scale(1.1);
}

/* Disabled state for Angel Menu icons */
.sidebar-icon-item.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

/* Hidden sidebar items in onboarding mode */
.nav-item[data-onboarding-hidden="true"] {
    display: none !important;
}