/* ========================================
   BANKEN COLLECTIONS DASHBOARD - Complete Redesign
   Enhanced with Gradient Matrix, Sidebar, Alert Banner
   ======================================== */

/* ========================================
   BANKEN MODULE LOADING SCREEN
   ======================================== */

.banken-loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 40px;
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.banken-loading-logo {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    animation: logoPulse 2s ease-in-out infinite;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.25);
}

.banken-loading-logo svg {
    color: white;
}

@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.banken-loading-title {
    color: #1e293b;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
    text-align: center;
}

.banken-loading-subtitle {
    color: #64748b;
    font-size: 16px;
    margin: 0 0 32px 0;
    text-align: center;
}

.banken-loading-progress-wrapper {
    width: 100%;
    max-width: 320px;
}

.banken-loading-progress-track {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.banken-loading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #667eea, #8b5cf6, #a855f7);
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
}

.banken-loading-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite;
}

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

.banken-loading-progress-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.banken-loading-status {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

.banken-loading-percent {
    color: #667eea;
    font-size: 14px;
    font-weight: 700;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 12px;
}

@media (max-width: 480px) {
    .banken-loading-screen {
        padding: 30px 20px;
        min-height: 60vh;
    }

    .banken-loading-logo {
        width: 80px;
        height: 80px;
        border-radius: 20px;
    }

    .banken-loading-logo svg {
        width: 48px;
        height: 48px;
    }

    .banken-loading-title {
        font-size: 22px;
    }

    .banken-loading-subtitle {
        font-size: 14px;
    }

    .banken-loading-progress-wrapper {
        max-width: 280px;
    }
}

/* ========================================
   ALERT BANNER
   ======================================== */

.alert-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.alert-banner.warning {
    background: #fef3c7;
    border: 1px solid #fcd34d;
}

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

.alert-banner.warning .alert-icon {
    background: #fde68a;
    color: #b45309;
}

.alert-content {
    flex: 1;
}

.alert-content strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 2px;
}

.alert-content span {
    font-size: 13px;
    color: #b45309;
}

.alert-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.alert-action:hover {
    background: #d97706;
}

.alert-dismiss {
    background: none;
    border: none;
    color: #d97706;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.alert-dismiss:hover {
    background: #fde68a;
}

/* ========================================
   MODULE SELECTOR NAVIGATION - Above Chat
   ======================================== */

.module-selector-above {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.module-selector-above .module-tabs {
    display: flex;
    gap: 8px;
}

.module-selector-above .brand-label {
    font-size: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* ========================================
   MODULE CONTENT - Show/Hide Logic
   ======================================== */

.module-content {
    display: none;
}

.module-content.active {
    display: block;
}

.module-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.module-tab svg {
    width: 18px;
    height: 18px;
}

.module-tab:hover:not(.disabled) {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}

.module-tab.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.module-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.soon-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: #fef3c7;
    color: #b45309;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ========================================
   BANKEN PAGE LAYOUT
   ======================================== */

.banken-page {
    padding: 24px;
    background: #f8fafc;
    min-height: 100vh;
}

/* Header */
.banken-header-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 20px 20px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.banken-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

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

.banken-logo-small {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.banken-page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
}

.banken-subtitle {
    font-size: 14px;
    color: #64748b;
    margin-top: 4px;
}

/* Header Center - Quick Access Tiles */
.banken-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex: 1;
}

.header-quick-tiles {
    display: flex;
    gap: 12px;
}

.header-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-tile:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.header-tile.coming-soon {
    opacity: 0.7;
}

.header-tile.coming-soon:hover {
    opacity: 1;
}

.header-tile svg {
    color: #64748b;
}

.header-tile-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.header-tile-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.header-tile-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #64748b;
}

.header-tile-badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

.header-tile-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.header-tile-badge.primary {
    background: #dbeafe;
    color: #2563eb;
}

.header-tile.active {
    background: rgba(37, 99, 235, 0.1);
    border-color: #3b82f6;
}

/* ========================================
   HEADER DROPDOWN MENUS
   ======================================== */

.header-dropdown-container {
    position: relative;
}

.header-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

.header-dropdown-trigger:hover,
.header-dropdown-trigger.active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.header-dropdown-trigger svg {
    color: #64748b;
    flex-shrink: 0;
}

.header-dropdown-trigger .dropdown-arrow {
    transition: transform 0.2s ease;
}

.header-dropdown-trigger.active .dropdown-arrow {
    transform: rotate(180deg);
}

.header-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.header-dropdown-menu.right {
    left: auto;
    right: 0;
}

.header-dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.dropdown-item:hover {
    background: #f1f5f9;
}

.dropdown-item.active {
    background: rgba(59, 130, 246, 0.1);
}

.dropdown-item.active .dropdown-item-title {
    color: #2563eb;
}

.dropdown-item svg {
    color: #64748b;
    flex-shrink: 0;
}

.dropdown-item.active svg {
    color: #2563eb;
}

.dropdown-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.dropdown-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.dropdown-item-desc {
    font-size: 12px;
    color: #94a3b8;
}

.dropdown-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #64748b;
}

.dropdown-badge.primary {
    background: #dbeafe;
    color: #2563eb;
}

.dropdown-badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

.dropdown-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.dropdown-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 0;
}

/* Header Feedback Button */
.header-feedback-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: white;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.header-feedback-btn:hover {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
}

.header-feedback-btn svg {
    color: white;
    flex-shrink: 0;
}

.header-feedback-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: white;
    color: #8b5cf6;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
}

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

.last-update {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
}

/* Header Action Buttons */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}

.header-btn.primary {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.header-btn.primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.header-btn svg {
    flex-shrink: 0;
}

/* Back Button */
.back-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-button:hover {
    background: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}

/* ========================================
   NAVIGATION TILES
   ======================================== */

.banken-nav-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.nav-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.nav-tile:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-tile.active {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.nav-tile-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
}

.nav-tile-icon.warning {
    background: #fef3c7;
    color: #f59e0b;
}

.nav-tile-icon.info {
    background: #dbeafe;
    color: #3b82f6;
}

.nav-tile-content {
    flex: 1;
}

.nav-tile-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.nav-tile-desc {
    font-size: 12px;
    color: #94a3b8;
}

.nav-tile-badge {
    padding: 6px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.nav-tile-badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

.nav-tile-badge.warning {
    background: #fef3c7;
    color: #b45309;
}

.nav-tile-badge.highlight {
    background: #dbeafe;
    color: #2563eb;
}

/* Soon Badge for Coming Soon tiles */
.nav-tile.coming-soon {
    position: relative;
    opacity: 0.85;
}

.nav-tile.coming-soon::after {
    content: 'SOON';
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.nav-tile.coming-soon:hover {
    opacity: 1;
}

/* Mini Charts in KPI Boxes */
.kpi-mini-chart {
    width: 65px;
    height: 32px;
    margin-left: auto;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    overflow: visible;
}

.kpi-mini-chart:hover {
    opacity: 1;
}

.kpi-mini-chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.kpi-content-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

/* Chart Popup Modal */
.chart-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.chart-popup {
    background: white;
    border-radius: 16px;
    padding: 24px 32px 28px 32px;
    width: 90%;
    max-width: 780px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

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

.chart-popup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.chart-popup-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.chart-popup-close:hover {
    background: #e2e8f0;
    color: #334155;
}

.chart-popup-content {
    min-height: 380px;
    overflow: visible;
}

/* ========================================
   SECTIONS
   ======================================== */

.banken-section {
    display: none;
}

.banken-section.active {
    display: block;
}

.section-intro {
    margin-bottom: 24px;
}

.section-intro h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.section-intro p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

/* Back to Dashboard Button */
.section-intro.with-back-button {
    position: relative;
}

.btn-back-to-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.btn-back-to-dashboard:hover {
    background: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}

.btn-back-to-dashboard svg {
    color: inherit;
    margin: 0;
}

/* ========================================
   PORTFOLIO KPI BOXES
   ======================================== */

.portfolio-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.portfolio-kpi-grid.five-columns {
    grid-template-columns: repeat(5, 1fr);
}

.portfolio-kpi-box.clickable {
    cursor: pointer;
}

.kpi-value.highlight-green {
    color: #16a34a;
}

.kpi-change.pulse-text {
    animation: pulse-text 2s infinite;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.portfolio-kpi-box {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.portfolio-kpi-box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* DPD Buckets compact in KPI card */
.dpd-buckets-compact {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.dpd-bucket-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dpd-bucket-tag.green {
    background: #dcfce7;
    color: #166534;
}

.dpd-bucket-tag.green:hover {
    background: #bbf7d0;
}

.dpd-bucket-tag.amber {
    background: #fef3c7;
    color: #b45309;
}

.dpd-bucket-tag.amber:hover {
    background: #fde68a;
}

.dpd-bucket-tag.red {
    background: #fee2e2;
    color: #b91c1c;
}

.dpd-bucket-tag.red:hover {
    background: #fecaca;
}

/* KPI Action Button */
.kpi-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin-top: 6px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kpi-action-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.kpi-action-btn svg {
    width: 12px;
    height: 12px;
}

/* Segment Fullscreen Modal */
.segment-fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.segment-fullscreen-modal.active {
    display: flex;
}

.segment-fullscreen-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 1400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.segment-fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.segment-fullscreen-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.segment-badge-large {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: 20px;
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.segment-fullscreen-subtitle {
    font-size: 16px;
    color: #64748b;
}

.segment-fullscreen-close {
    background: #f1f5f9;
    border: none;
    border-radius: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748b;
}

.segment-fullscreen-close:hover {
    background: #e2e8f0;
    color: #ef4444;
}

.segment-fullscreen-body {
    flex: 1;
    overflow: auto;
    padding: 24px;
}

.segment-fullscreen-body .customer-table {
    width: 100%;
}

.segment-fullscreen-body .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
    font-size: 16px;
}

body.modal-open {
    overflow: hidden;
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon.blue {
    background: #dbeafe;
    color: #2563eb;
}

.kpi-icon.orange {
    background: #ffedd5;
    color: #ea580c;
}

.kpi-icon.purple {
    background: #f3e8ff;
    color: #9333ea;
}

.kpi-icon.red {
    background: #fee2e2;
    color: #dc2626;
}

.kpi-icon.green {
    background: #dcfce7;
    color: #16a34a;
}

.kpi-content {
    flex: 1;
    min-width: 0;
}

.kpi-label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
    font-weight: 500;
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

/* Value and change on same row */
.kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.kpi-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

.kpi-change.positive {
    color: #16a34a;
}

.kpi-change.negative {
    color: #dc2626;
}

.kpi-change.neutral {
    color: #f59e0b;
}

/* ========================================
   ACTION BAR
   ======================================== */

.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
}

.action-bar-left {
    display: flex;
    gap: 12px;
}

.action-bar-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

.action-bar.compact {
    background: white;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.action-bar-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Inline Stats */
.inline-stats {
    display: flex;
    gap: 24px;
}

.inline-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.inline-stat:hover {
    background: #f1f5f9;
}

.inline-stat svg {
    color: #64748b;
}

.inline-stat .stat-label {
    font-size: 15px;
    font-weight: 500;
    color: #475569;
}

.inline-stat .stat-value {
    font-size: 20px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
}

/* DPD Buckets Inline */
.dpd-buckets-inline {
    display: flex;
    gap: 8px;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid #e2e8f0;
}

.dpd-bucket-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dpd-bucket-inline:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.dpd-bucket-inline .bucket-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dpd-bucket-inline .bucket-dot.green { background: #22c55e; }
.dpd-bucket-inline .bucket-dot.amber { background: #f59e0b; }
.dpd-bucket-inline .bucket-dot.red { background: #ef4444; }

.dpd-bucket-inline .bucket-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.dpd-bucket-inline .bucket-label {
    font-size: 11px;
    color: #64748b;
}

.dpd-bucket-inline .bucket-count {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.inline-stat .stat-value.blue {
    background: #dbeafe;
    color: #1e40af;
}

.inline-stat .stat-value.green {
    background: #dcfce7;
    color: #166534;
}

.inline-stat .stat-value.purple {
    background: #f3e8ff;
    color: #7c3aed;
}

/* Icon Buttons */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}

.btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-width: 320px;
}

.search-box svg {
    color: #94a3b8;
    flex-shrink: 0;
}

.search-box input {
    border: none;
    outline: none;
    font-size: 14px;
    width: 100%;
    background: transparent;
}

.search-box input::placeholder {
    color: #94a3b8;
}

/* ========================================
   SEGMENTIERUNG GRID
   ======================================== */

.segmentierung-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.scatter-plot-card,
.portfolio-evolution-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

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

.card-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.card-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: #e2e8f0;
    color: #334155;
}

.time-select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #334155;
    background: white;
    cursor: pointer;
}

/* Scatter Plot Container */
.scatter-plot-container {
    position: relative;
    height: 300px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 16px;
}

.scatter-plot-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.quadrant-label {
    position: absolute;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    pointer-events: none;
}

.quadrant-label small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #94a3b8;
}

.quadrant-label.q1 { top: 10px; right: 10px; color: #22c55e; }
.quadrant-label.q2 { top: 10px; left: 10px; color: #f59e0b; }
.quadrant-label.q3 { bottom: 10px; left: 10px; color: #f97316; }
.quadrant-label.q4 { bottom: 10px; right: 10px; color: #ef4444; }

.scatter-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
}

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

.dot.green { background: #22c55e; }
.dot.yellow { background: #f59e0b; }
.dot.orange { background: #f97316; }
.dot.red { background: #ef4444; }

/* Portfolio Chart */
.portfolio-chart-container {
    height: 220px;
    margin-bottom: 16px;
}

.portfolio-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.portfolio-stat {
    text-align: center;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.portfolio-stat .stat-label {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.portfolio-stat .stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.portfolio-stat .stat-value.positive { color: #22c55e; }
.portfolio-stat .stat-value.negative { color: #ef4444; }

/* ========================================
   MAIN CONTENT GRID WITH SIDEBAR
   ======================================== */

.main-content-grid {
    display: block;
    margin-bottom: 24px;
}

/* Matrix Section */
.matrix-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Matrix Section Wrapper (when collapsible) */
.matrix-section-wrapper {
    background: white;
}

.matrix-section-wrapper .collapsible-content {
    padding: 0 20px 20px 20px;
}

.card-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 4px 0 0 0;
}

.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
}

/* Matrix Quadrants Grid */
.matrix-quadrants {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.matrix-quadrant {
    padding: 20px;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 200px;
}

.matrix-quadrant:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}

.matrix-quadrant.selected {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px currentColor;
}

/* Segment-specific selected states */
.segment-eskalation.selected {
    background: rgba(251, 191, 36, 0.15);
    border-width: 3px;
}

.segment-prioritaet.selected {
    background: rgba(34, 197, 94, 0.15);
    border-width: 3px;
}

.segment-abwicklung.selected {
    background: rgba(239, 68, 68, 0.15);
    border-width: 3px;
}

.segment-restrukturierung.selected {
    background: rgba(99, 102, 241, 0.15);
    border-width: 3px;
}

/* Segment Filter Indicator */
.segment-filter-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-indicator-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-indicator-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    color: white;
    font-size: 13px;
    font-weight: 600;
}

.filter-indicator-badge svg {
    flex-shrink: 0;
}

.filter-indicator-count {
    font-size: 13px;
    color: #64748b;
}

.filter-indicator-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-indicator-clear:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.filter-indicator-clear svg {
    flex-shrink: 0;
}

/* Segment Colors - Outline only */
.segment-eskalation {
    background: transparent;
    border: 2px solid #fbbf24;
    color: #92400e;
}

.segment-prioritaet {
    background: transparent;
    border: 2px solid #22c55e;
    color: #166534;
}

.segment-abwicklung {
    background: transparent;
    border: 2px solid #ef4444;
    color: #991b1b;
}

.segment-restrukturierung {
    background: transparent;
    border: 2px solid #6366f1;
    color: #3730a3;
}

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

.quadrant-subtitle {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.quadrant-title {
    font-size: 18px;
    font-weight: 700;
    margin: 4px 0 0 0;
}

.quadrant-count {
    background: rgba(0, 0, 0, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.quadrant-volume {
    font-size: 13px;
    opacity: 0.9;
    margin: 0 0 12px 0;
}

.quadrant-strategy {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.9;
}

.matrix-axis-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
    padding: 0 8px;
}

/* Dashboard Sidebar */
.dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sidebar-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px 0;
}

/* DPD Buckets */
.dpd-buckets {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dpd-bucket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dpd-bucket:hover {
    transform: translateX(4px);
}

.dpd-bucket.bucket-green { background: #f0fdf4; }
.dpd-bucket.bucket-amber { background: #fffbeb; }
.dpd-bucket.bucket-red { background: #fef2f2; }

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

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

.bucket-dot.green { background: #22c55e; }
.bucket-dot.amber { background: #f59e0b; }
.bucket-dot.red { background: #ef4444; }

.bucket-label {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.bucket-right {
    text-align: right;
}

.bucket-count {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

.bucket-volume {
    display: block;
    font-size: 11px;
    color: #64748b;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.quick-action-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.quick-action-btn.primary-action {
    background: #fef2f2;
    border-color: #fecaca;
}

.quick-action-btn.primary-action:hover {
    background: #fee2e2;
}

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

.action-text {
    flex: 1;
}

.action-text strong {
    display: block;
    font-size: 13px;
    color: #1e293b;
}

.action-text small {
    display: block;
    font-size: 11px;
    color: #64748b;
}

/* Today's Highlights */
.today-highlights {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.highlight-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.highlight-item:hover {
    background: #f1f5f9;
}

.highlight-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 14px;
}

.highlight-icon.blue { background: #dbeafe; }
.highlight-icon.green { background: #dcfce7; }
.highlight-icon.purple { background: #f3e8ff; }

.highlight-label {
    flex: 1;
    font-size: 13px;
    color: #475569;
}

.highlight-count {
    font-size: 15px;
    font-weight: 700;
}

.highlight-count.blue { color: #2563eb; }
.highlight-count.green { color: #16a34a; }
.highlight-count.purple { color: #9333ea; }

/* Full Width Portfolio Card */
.portfolio-evolution-card.full-width {
    width: 100%;
    margin-bottom: 24px;
}

/* ========================================
   DASHBOARD UPDATES
   ======================================== */

.dashboard-updates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.updates-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

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

.updates-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.updates-icon.new {
    background: #dbeafe;
    color: #3b82f6;
}

.updates-icon.success {
    background: #dcfce7;
    color: #22c55e;
}

.updates-header h4 {
    flex: 1;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.updates-count {
    padding: 4px 10px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
}

.updates-count.success {
    background: #dcfce7;
    color: #16a34a;
}

.updates-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.update-item {
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.update-item:hover {
    background: #f1f5f9;
}

.update-item.success {
    background: #f0fdf4;
}

.update-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.update-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.update-amount {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.update-amount.positive {
    color: #22c55e;
}

.update-sub {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #94a3b8;
}

.btn-show-all {
    width: 100%;
    padding: 10px;
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    color: #3b82f6;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-show-all:hover {
    background: #e2e8f0;
}

.btn-show-all.success {
    color: #16a34a;
}

/* ========================================
   COLLAPSIBLE SECTIONS
   ======================================== */

.collapsible-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    background: white;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.collapsible-header:hover {
    background: #f8fafc;
}

.collapsible-section.collapsed .collapsible-header {
    border-bottom: none;
}

.collapsible-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.collapsible-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.collapsible-header .card-subtitle {
    margin: 0;
}

.collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    transition: all 0.2s ease;
}

.collapse-toggle:hover {
    background: #e2e8f0;
    color: #334155;
}

.collapse-toggle svg {
    transition: transform 0.3s ease;
}

.collapsible-section.collapsed .collapse-toggle svg {
    transform: rotate(-90deg);
}

.collapsible-content {
    padding: 0 20px 20px 20px;
    max-height: 2000px;
    opacity: 1;
    transition: all 0.3s ease;
}

.collapsible-section.collapsed .collapsible-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
}

/* Matrix and Ehemalige Fälle Layout */
.matrix-ehemalige-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 20px;
    margin-bottom: 24px;
}

/* Ehemalige Fälle Section */
.ehemalige-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.ehemalige-section .collapsible-header {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.ehemalige-tile {
    padding: 20px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ehemalige-tile:hover {
    filter: brightness(1.05);
}

.ehemalige-tile.selected {
    box-shadow: 0 0 0 3px #94a3b8 inset;
}

.ehemalige-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ehemalige-icon svg {
    width: 24px;
    height: 24px;
}

.ehemalige-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.ehemalige-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 16px;
}

.ehemalige-count {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ehemalige-volume {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 16px;
}

.ehemalige-strategy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ehemalige-strategy svg {
    width: 14px;
    height: 14px;
}

/* Ehemalige List Preview */
.ehemalige-list {
    padding: 16px;
    background: #f8fafc;
}

.ehemalige-list-title {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.ehemalige-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: white;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.ehemalige-item:hover {
    background: #f1f5f9;
}

.ehemalige-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.ehemalige-item-info {
    font-size: 11px;
    color: #64748b;
}

.ehemalige-item-amount {
    font-size: 13px;
    font-weight: 600;
    color: #22c55e;
}

.ehemalige-show-all {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 12px;
    background: none;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ehemalige-show-all:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #334155;
}

/* Compact Ehemalige Fälle Layout */
.ehemalige-compact {
    max-height: none;
}

.ehemalige-tile-compact {
    padding: 12px 16px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ehemalige-tile-compact:hover {
    filter: brightness(1.05);
}

.ehemalige-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ehemalige-icon-small {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ehemalige-icon-small svg {
    width: 16px;
    height: 16px;
}

.ehemalige-count-inline {
    font-size: 24px;
    font-weight: 700;
}

.ehemalige-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
}

.ehemalige-volume-inline {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.ehemalige-list-compact {
    padding: 12px;
    background: #f8fafc;
}

.ehemalige-list-compact .ehemalige-list-title {
    font-size: 11px;
    margin-bottom: 8px;
}

.ehemalige-list-compact .ehemalige-item {
    padding: 8px 10px;
    margin-bottom: 6px;
}

.ehemalige-list-compact .ehemalige-item-name {
    font-size: 12px;
}

.ehemalige-list-compact .ehemalige-item-info {
    font-size: 10px;
}

.ehemalige-list-compact .ehemalige-item-amount {
    font-size: 12px;
}

.ehemalige-show-all-compact {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    background: none;
    border: none;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.ehemalige-show-all-compact:hover {
    color: #334155;
    text-decoration: underline;
}

/* ========================================
   CUSTOMER LIST
   ======================================== */

.customer-list-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

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

.section-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.list-filters {
    display: flex;
    gap: 12px;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #334155;
    background: white;
    cursor: pointer;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.search-box input {
    border: none;
    background: transparent;
    font-size: 13px;
    color: #334155;
    outline: none;
    width: 150px;
}

.search-box svg {
    color: #94a3b8;
}

/* Customer Table */
.customer-table-wrapper {
    overflow-x: auto;
    margin-bottom: 16px;
}

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

.customer-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    background: #f8fafc;
}

.customer-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

.customer-table tr {
    cursor: pointer;
    transition: background 0.2s ease;
}

.customer-table tr:hover {
    background: #f8fafc;
}

.customer-cell strong {
    display: block;
    color: #1e293b;
}

.customer-cell small {
    color: #94a3b8;
    font-size: 12px;
}

.amount {
    font-weight: 600;
    color: #1e293b;
}

/* Badges */
.dpd-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.dpd-badge.high { background: #fee2e2; color: #dc2626; }
.dpd-badge.medium { background: #fef3c7; color: #b45309; }
.dpd-badge.low { background: #dcfce7; color: #16a34a; }

.segment-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.segment-badge.priority { background: #dcfce7; color: #16a34a; }
.segment-badge.restructure { background: #fef3c7; color: #b45309; }
.segment-badge.escalate { background: #ffedd5; color: #ea580c; }
.segment-badge.writeoff { background: #fee2e2; color: #dc2626; }
.segment-badge.large { font-size: 16px; padding: 8px 16px; }

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.offen { background: #dbeafe; color: #2563eb; }
.status-badge.inkasso { background: #fee2e2; color: #dc2626; }
.status-badge.vereinbarung { background: #dcfce7; color: #16a34a; }
.status-badge.abschreibung { background: #f1f5f9; color: #64748b; }
.status-badge.zusage { background: #f0fdf4; color: #15803d; }

/* Bearbeiter Badge */
.bearbeiter-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #f8fafc;
    color: #475569;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

/* KI Score in Table */
.ki-score {
    text-align: center;
}

.ki-score .score-bar {
    width: 60px;
    height: 60px;
    position: relative;
    background: linear-gradient(to right, #fee2e2 50%, #dcfce7 50%);
    background-size: 100% 100%;
    border-radius: 4px;
    margin: 0 auto 4px;
}

.ki-score .score-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #1e293b;
    border-radius: 50%;
    left: var(--willingness);
    bottom: var(--ability);
    transform: translate(-50%, 50%);
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.ki-score small {
    font-size: 10px;
    color: #94a3b8;
}

/* W/A Score Visual Bars (Enhanced Table Display) */
.wa-score-visual {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.wa-bar-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wa-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    width: 12px;
}

.wa-bar {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.wa-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.wa-bar-fill.willingness {
    background: linear-gradient(90deg, #f59e0b, #eab308);
}

.wa-bar-fill.willingness.high {
    background: linear-gradient(90deg, #22c55e, #10b981);
}

.wa-bar-fill.willingness.low {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.wa-bar-fill.ability {
    background: linear-gradient(90deg, #3b82f6, #6366f1);
}

.wa-bar-fill.ability.low {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.wa-value {
    font-size: 10px;
    font-weight: 500;
    color: #64748b;
    width: 28px;
    text-align: right;
}

/* Mahnstufe Badges */
.mahnstufe-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.mahnstufe-badge.m1 {
    background: #dcfce7;
    color: #166534;
}

.mahnstufe-badge.m2 {
    background: #fef3c7;
    color: #b45309;
}

.mahnstufe-badge.m3 {
    background: #fed7aa;
    color: #c2410c;
}

.mahnstufe-badge.m4 {
    background: #fee2e2;
    color: #dc2626;
}

/* Next Action Column */
.next-action {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.next-action .action-type {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.next-action .action-date {
    font-size: 11px;
    color: #64748b;
}

.next-action .action-date.overdue {
    color: #dc2626;
    font-weight: 500;
}

.next-action .action-date.upcoming {
    color: #16a34a;
}

/* Action Buttons in Table */
.actions-cell {
    display: flex;
    gap: 6px;
}

.action-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

.action-btn.primary {
    background: #dbeafe;
    color: #3b82f6;
}

.action-btn.primary:hover {
    background: #bfdbfe;
}

.action-btn.danger {
    background: #fee2e2;
    color: #ef4444;
}

.action-btn.danger:hover {
    background: #fecaca;
}

/* Pagination */
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #64748b;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-btn {
    padding: 6px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: #f1f5f9;
}

.pagination-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

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

/* ========================================
   NPL DASHBOARD
   ======================================== */

.npl-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.npl-kpi-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.npl-kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: #3b82f6;
}

.npl-kpi-icon.warning {
    background: #fef3c7;
    color: #f59e0b;
}

.npl-kpi-icon.success {
    background: #dcfce7;
    color: #22c55e;
}

.npl-kpi-content {
    flex: 1;
}

.npl-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.npl-kpi-label {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 6px;
}

.npl-kpi-change {
    font-size: 12px;
    font-weight: 500;
}

.npl-kpi-change.positive { color: #22c55e; }
.npl-kpi-change.negative { color: #ef4444; }
.npl-kpi-change.neutral { color: #64748b; }

.npl-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.npl-chart-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.npl-chart-card h4 {
    margin: 0 0 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.npl-chart-card .chart-container {
    height: 200px;
}

.npl-actions-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.npl-actions-section h4 {
    margin: 0 0 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.npl-action-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.npl-action-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #e2e8f0;
}

.npl-action-card.highlight {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.npl-action-card .action-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
}

.npl-action-card .action-count {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
}

.npl-action-card .action-label {
    font-size: 13px;
    color: #64748b;
}

.npl-action-card .action-body {
    margin-bottom: 12px;
}

.npl-action-card .action-body strong {
    display: block;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 4px;
}

.npl-action-card .action-body p {
    margin: 0;
    font-size: 12px;
    color: #64748b;
}

.action-button {
    width: 100%;
    padding: 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-button:hover {
    background: #f1f5f9;
}

.action-button.primary {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.action-button.primary:hover {
    background: #2563eb;
}

/* ========================================
   STAGE 2 ANALYSIS
   ======================================== */

.stage2-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.stage2-main-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.stage2-header h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.stage2-kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.stage2-kpi {
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    text-align: center;
}

.stage2-kpi .kpi-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.stage2-kpi .kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}

.stage2-kpi .kpi-value.negative {
    color: #ef4444;
}

.stage2-migration-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.stage2-migration-card h4 {
    margin: 0 0 20px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.migration-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.migration-box {
    padding: 16px 20px;
    border-radius: 8px;
    text-align: center;
}

.migration-box.stage1 {
    background: #dcfce7;
}

.migration-box.stage2-center {
    background: #fef3c7;
}

.migration-box.stage3 {
    background: #fee2e2;
}

.migration-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.migration-value {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
}

.migration-arrow {
    font-size: 12px;
    color: #64748b;
}

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

.migration-in,
.migration-out {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.migration-in { color: #16a34a; }
.migration-out { color: #dc2626; }

.migration-summary {
    text-align: center;
    padding: 12px;
    background: #fef2f2;
    border-radius: 8px;
}

.summary-negative {
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
}

.stage2-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.stage2-chart-card,
.stage2-risk-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.stage2-chart-card h4,
.stage2-risk-card h4 {
    margin: 0 0 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.stage2-chart-card .chart-container {
    height: 200px;
}

.risk-drivers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.risk-driver {
    position: relative;
}

.risk-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(to right, #fee2e2 var(--width), #f8fafc var(--width));
    border-radius: 8px;
}

.risk-name {
    font-size: 13px;
    color: #334155;
}

.risk-value {
    font-size: 13px;
    font-weight: 600;
    color: #dc2626;
}

/* ========================================
   AUFGABEN
   ======================================== */

.aufgaben-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.aufgaben-filter {
    padding: 10px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aufgaben-filter:hover {
    background: #f1f5f9;
}

.aufgaben-filter.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.aufgaben-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aufgabe-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: white;
    border-radius: 10px;
    border-left: 4px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.aufgabe-item.priority-high {
    border-left-color: #ef4444;
}

.aufgabe-item.priority-medium {
    border-left-color: #f59e0b;
}

.aufgabe-item.priority-normal {
    border-left-color: #3b82f6;
}

.aufgabe-item.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.aufgabe-item.clickable:hover {
    background: #f8fafc;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.aufgabe-priority {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
}

.priority-high .aufgabe-priority {
    background: #fee2e2;
    color: #ef4444;
}

.priority-medium .aufgabe-priority {
    background: #fef3c7;
    color: #f59e0b;
}

.aufgabe-content {
    flex: 1;
}

.aufgabe-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.aufgabe-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
}

.aufgabe-customer {
    color: #3b82f6;
    cursor: pointer;
}

.aufgabe-customer:hover {
    text-decoration: underline;
}

.aufgabe-due {
    color: #64748b;
}

.aufgabe-due.overdue {
    color: #ef4444;
    font-weight: 500;
}

.aufgabe-due.today {
    color: #f59e0b;
    font-weight: 500;
}

.aufgabe-actions {
    display: flex;
    gap: 8px;
}

.btn-complete,
.btn-reschedule {
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-complete {
    background: #22c55e;
    border: none;
    color: white;
}

.btn-complete:hover {
    background: #16a34a;
}

.btn-reschedule {
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.btn-reschedule:hover {
    background: #f1f5f9;
}

/* Aufgaben Pagination */
.aufgaben-pagination {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

.pagination-info {
    font-size: 13px;
    color: #64748b;
}

/* ========================================
   CUSTOMER DETAIL MODAL
   ======================================== */

.customer-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-title h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.modal-title .customer-id {
    font-size: 13px;
    color: #64748b;
}

.modal-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #e2e8f0;
    color: #334155;
}

.modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 24px;
    background: #f8fafc;
}

.modal-tab {
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-tab:hover {
    color: #334155;
}

.modal-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: white;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.customer-tab {
    display: none;
}

.customer-tab.active {
    display: block;
}

/* Stammdaten Header Actions */
.stammdaten-header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.btn-edit-stammdaten {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    color: #3b82f6;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit-stammdaten:hover {
    background: #3b82f6;
    color: white;
}

.btn-edit-stammdaten svg {
    width: 14px;
    height: 14px;
}

/* Stammdaten */
.stammdaten-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.stammdaten-section h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.stammdaten-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
}

.stammdaten-row .label {
    color: #64748b;
}

.stammdaten-row .value {
    color: #1e293b;
    font-weight: 500;
}

.stammdaten-row .value.rating-bad {
    color: #ef4444;
    font-weight: 700;
}

/* Enhanced Stammdaten Grid */
.stammdaten-grid.enhanced {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.stammdaten-grid.enhanced .stammdaten-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
}

.stammdaten-grid.enhanced .stammdaten-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    border-bottom: 2px solid #3b82f6;
}

.stammdaten-grid.enhanced .stammdaten-section h4 svg {
    color: #3b82f6;
}

.stammdaten-subsection {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #cbd5e1;
}

.stammdaten-subsection strong {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stammdaten-row .value.clickable {
    color: #3b82f6;
    cursor: pointer;
    transition: color 0.2s ease;
}

.stammdaten-row .value.clickable:hover {
    color: #2563eb;
    text-decoration: underline;
}

.stammdaten-row .value.mono {
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.stammdaten-row .value.highlight-red {
    color: #dc2626;
    font-weight: 700;
}

.stammdaten-row .value.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.stammdaten-row .value.badge.gewerbe {
    background: #dbeafe;
    color: #1e40af;
}

.stammdaten-row .value.badge.privat {
    background: #dcfce7;
    color: #166534;
}

.stammdaten-row .value.badge.warning {
    background: #fef3c7;
    color: #b45309;
}

.stammdaten-row .value.badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

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

/* ========================================
   KONTEN & VERTRÄGE TAB - MODAL
   ======================================== */

.konten-header {
    margin-bottom: 24px;
}

.konten-summary {
    display: flex;
    gap: 24px;
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.konten-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.konten-kpi .kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.konten-kpi .kpi-value.highlight-red {
    color: #dc2626;
}

.konten-kpi .kpi-label {
    font-size: 12px;
    color: #64748b;
}

.credit-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.credit-product-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
}

.credit-product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.credit-product-card.danger {
    border-left: 4px solid #ef4444;
}

.credit-product-card.warning {
    border-left: 4px solid #f59e0b;
}

.credit-product-card.primary {
    border-left: 4px solid #3b82f6;
}

.credit-product-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.credit-product-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}

.credit-product-card.danger .credit-product-icon {
    background: #fee2e2;
    color: #dc2626;
}

.credit-product-card.warning .credit-product-icon {
    background: #fef3c7;
    color: #d97706;
}

.credit-product-card.primary .credit-product-icon {
    background: #dbeafe;
    color: #2563eb;
}

.credit-product-info {
    flex: 1;
    min-width: 0;
}

.credit-product-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.credit-product-number {
    display: block;
    font-size: 11px;
    color: #64748b;
    font-family: 'Monaco', 'Menlo', monospace;
}

.credit-status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.credit-status-badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

.credit-status-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.credit-product-amounts {
    margin-bottom: 12px;
}

.amount-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

.amount-row .amount-label {
    color: #64748b;
}

.amount-row .amount-value {
    font-weight: 600;
    color: #1e293b;
}

.amount-row .amount-value.highlight-red {
    color: #dc2626;
}

.utilization-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-top: 8px;
    position: relative;
    overflow: visible;
}

.utilization-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.utilization-fill.danger {
    background: #ef4444;
}

.utilization-fill.warning {
    background: #f59e0b;
}

.over-limit-indicator {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        #dc2626,
        #dc2626 2px,
        #b91c1c 2px,
        #b91c1c 4px
    );
    border-radius: 3px;
}

.credit-mini-chart {
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

.credit-mini-chart svg {
    width: 100%;
    height: 50px;
}

.credit-mini-chart .chart-label {
    display: block;
    font-size: 10px;
    color: #94a3b8;
    text-align: center;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .credit-products-grid {
        grid-template-columns: 1fr;
    }

    .konten-summary {
        flex-direction: column;
        gap: 12px;
    }
}

/* Transactions */
.transaction-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card {
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    text-align: center;
}

.summary-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.summary-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.summary-value.negative {
    color: #ef4444;
}

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

.transaction-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.transaction-table td {
    padding: 12px 16px;
    font-size: 13px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

.transaction-table .amount.positive {
    color: #22c55e;
}

.transaction-table .amount.negative {
    color: #ef4444;
}

.tx-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.tx-status.success {
    background: #dcfce7;
    color: #16a34a;
}

.tx-status.failed {
    background: #fee2e2;
    color: #dc2626;
}

/* Forderungen */
.forderungen-overview {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    margin-bottom: 24px;
}

.forderung-total {
    padding: 24px;
    background: #f8fafc;
    border-radius: 12px;
    text-align: center;
}

.forderung-total .label {
    display: block;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 8px;
}

.forderung-total .value {
    font-size: 32px;
    font-weight: 700;
    color: #1e293b;
}

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

.breakdown-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
}

.breakdown-item .label {
    font-size: 13px;
    color: #64748b;
}

.breakdown-item .value {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.forderung-timeline h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.timeline-item {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid #e2e8f0;
}

.timeline-item.overdue {
    background: #fef2f2;
    border-left-color: #ef4444;
}

.timeline-date {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    min-width: 90px;
}

.timeline-content {
    font-size: 13px;
    color: #334155;
}

/* Workflow */
.workflow-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 24px;
}

.status-label {
    font-size: 14px;
    color: #64748b;
}

.status-value {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.status-value.inkasso {
    background: #fee2e2;
    color: #dc2626;
}

.workflow-timeline {
    margin-bottom: 24px;
}

.wf-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-left: 2px solid #e2e8f0;
    margin-left: 16px;
    padding-left: 24px;
    position: relative;
}

.wf-item:last-child {
    border-left-color: transparent;
}

.wf-icon {
    position: absolute;
    left: -13px;
    width: 24px;
    height: 24px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.wf-item.completed .wf-icon {
    background: #dcfce7;
    border-color: #22c55e;
    color: #22c55e;
}

.wf-item.active .wf-icon {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #3b82f6;
}

.wf-content {
    flex: 1;
}

.wf-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.wf-date {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.wf-note {
    font-size: 12px;
    color: #94a3b8;
}

.workflow-actions h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

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

.action-btn-large {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn-large:hover {
    background: #f1f5f9;
}

.action-btn-large.warning {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #b45309;
}

.action-btn-large.danger {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* Kommunikation Tab */
.kommunikation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.kommunikation-actions {
    display: flex;
    gap: 8px;
}

.btn-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-small:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.btn-small.primary {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.btn-small.primary:hover {
    background: #2563eb;
}

.kommunikation-timeline h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.komm-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 12px;
}

.komm-item.incoming {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.komm-item.missed {
    background: #fef3c7;
    border-color: #fcd34d;
}

.komm-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 10px;
    color: #64748b;
}

.komm-item.letter .komm-icon { color: #3b82f6; }
.komm-item.phone .komm-icon { color: #22c55e; }
.komm-item.phone.missed .komm-icon { color: #f59e0b; }
.komm-item.email .komm-icon { color: #8b5cf6; }
.komm-item.incoming .komm-icon { color: #2563eb; background: #dbeafe; }

.komm-content {
    flex: 1;
    min-width: 0;
}

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

.komm-type {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
}

.komm-type.incoming-badge {
    padding: 3px 10px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 12px;
    font-size: 12px;
}

.komm-date {
    font-size: 12px;
    color: #64748b;
}

.komm-body p {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #475569;
}

.komm-preview {
    padding: 16px;
    background: white;
    border-radius: 8px;
    font-size: 13px;
    color: #475569;
    line-height: 1.7;
    border-left: 3px solid #e2e8f0;
    margin-bottom: 10px;
    min-height: 100px;
    max-height: none;
}

.komm-preview.customer-message {
    background: #f0f9ff;
    border-left-color: #3b82f6;
}

/* KI Summary for Kommunikation Tab */
.kommunikation-ki-summary {
    margin: 16px 0;
}

.ki-summary-mini {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 16px;
}

.ki-summary-header-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 12px;
}

.ki-summary-header-mini svg {
    color: #0ea5e9;
}

.ki-summary-content-mini p {
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
}

.ki-summary-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ki-summary-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    padding: 4px 10px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.ki-summary-stats .stat-item.success {
    color: #16a34a;
    background: #f0fdf4;
    border-color: #86efac;
}

.ki-summary-stats .stat-item.danger {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}

.ki-summary-stats .stat-item.warning {
    color: #d97706;
    background: #fffbeb;
    border-color: #fde68a;
}

.komm-note {
    padding: 10px;
    background: white;
    border-radius: 6px;
    font-size: 13px;
    color: #475569;
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: #3b82f6;
    cursor: pointer;
}

.btn-link:hover {
    text-decoration: underline;
}

.komm-meta {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #64748b;
}

.meta-item.warning {
    color: #f59e0b;
    font-weight: 600;
}

.meta-item svg {
    color: #22c55e;
}

/* KI-Analyse */
.ki-matrix-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.ki-score-visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.score-chart {
    width: 200px;
    height: 200px;
    background: linear-gradient(to right,
        #fee2e2 0%, #fee2e2 50%,
        #dcfce7 50%, #dcfce7 100%);
    background-size: 100% 50%;
    background-repeat: no-repeat;
    background-position: bottom;
    position: relative;
    border-radius: 8px;
    margin: 0 auto;
}

.score-chart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to right,
        #fef3c7 0%, #fef3c7 50%,
        #dcfce7 50%, #dcfce7 100%);
    border-radius: 8px 8px 0 0;
}

.score-point {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #1e293b;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 10;
}

.score-labels {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.score-name {
    flex: 1;
    font-size: 13px;
    color: #64748b;
}

.score-bar-visual {
    width: 100px;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.score-bar-visual .bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 4px;
}

.score-percent {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    min-width: 40px;
    text-align: right;
}

.ki-segment-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.ki-segment-result p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.ki-factors h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.factor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.factor-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
}

.factor-item.positive {
    background: #f0fdf4;
}

.factor-item.negative {
    background: #fef2f2;
}

.factor-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.factor-item.positive .factor-icon {
    background: #dcfce7;
    color: #22c55e;
}

.factor-item.negative .factor-icon {
    background: #fee2e2;
    color: #ef4444;
}

.factor-name {
    flex: 1;
    font-size: 13px;
    color: #334155;
}

.factor-impact {
    font-size: 13px;
    font-weight: 600;
}

.factor-item.positive .factor-impact {
    color: #22c55e;
}

.factor-item.negative .factor-impact {
    color: #ef4444;
}

.ki-recommendation h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.recommendation-box {
    padding: 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}

.recommendation-box p {
    margin: 0;
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
}

/* Enhanced AI Recommendation Box */
.ki-recommendation-enhanced {
    margin-top: 24px;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
    border-radius: 16px;
    padding: 2px;
}

.ai-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.ai-badge svg {
    opacity: 0.9;
}

.ai-recommendation-content {
    background: white;
    border-radius: 14px;
    padding: 20px;
}

.recommendation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.recommendation-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #1e293b;
}

.recommendation-title svg {
    color: #f59e0b;
    flex-shrink: 0;
}

.confidence-badge {
    padding: 4px 12px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.recommendation-details {
    margin-bottom: 20px;
}

.recommendation-details p {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

.recommendation-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recommendation-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #334155;
}

.step-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.step-icon.urgent {
    background: #fef3c7;
    color: #b45309;
}

.recommendation-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    margin-bottom: 16px;
}

.recommendation-metrics .metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metric-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 3px;
}

.metric-value {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.metric-value.highlight {
    color: #16a34a;
}

.recommendation-actions {
    display: flex;
    gap: 12px;
}

.ai-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-action-btn.primary {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: white;
}

.ai-action-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.ai-action-btn.secondary {
    background: #f1f5f9;
    color: #64748b;
}

.ai-action-btn.secondary:hover {
    background: #e2e8f0;
}

@media (max-width: 768px) {
    .recommendation-metrics {
        grid-template-columns: 1fr;
    }

    .recommendation-actions {
        flex-direction: column;
    }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1200px) {
    .banken-nav-tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .segmentierung-grid,
    .dashboard-updates,
    .npl-charts-grid,
    .stage2-overview,
    .stage2-details {
        grid-template-columns: 1fr;
    }

    .npl-kpi-grid,
    .npl-action-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .banken-nav-tiles,
    .npl-kpi-grid,
    .npl-action-cards {
        grid-template-columns: 1fr;
    }

    .banken-header-new {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .list-filters {
        flex-wrap: wrap;
    }

    .stammdaten-grid {
        grid-template-columns: 1fr;
    }

    .ki-matrix-detail {
        grid-template-columns: 1fr;
    }

    .action-buttons {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* ========================================
   DOCUMENT SCANNER MODAL
   ======================================== */

.scanner-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.scanner-modal.active {
    display: flex;
}

.scanner-container {
    background: white;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scanner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.scanner-header h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.scanner-header h2 svg {
    color: #2563eb;
}

.close-scanner-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.close-scanner-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.scanner-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.scanner-step {
    display: none;
}

.scanner-step.active {
    display: block;
}

.scanner-step-header {
    margin-bottom: 32px;
}

.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 12px;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.step-number.active {
    background: #2563eb;
    color: white;
}

.step-number.completed {
    background: #22c55e;
    color: white;
}

.step-line {
    width: 60px;
    height: 2px;
    background: #e2e8f0;
}

.step-line.completed {
    background: #22c55e;
}

.step-labels {
    display: flex;
    justify-content: center;
    gap: 48px;
    font-size: 13px;
    color: #94a3b8;
}

.step-labels span.active {
    color: #2563eb;
    font-weight: 500;
}

.step-labels span.completed {
    color: #22c55e;
}

.upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.upload-area.dragover {
    border-color: #2563eb;
    background: #eff6ff;
}

.upload-icon {
    color: #94a3b8;
    margin-bottom: 16px;
}

.upload-area h3 {
    font-size: 18px;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.upload-area p {
    color: #64748b;
    margin: 0 0 8px 0;
}

.supported-formats {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 24px !important;
}

.camera-option {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.camera-option span {
    color: #94a3b8;
    font-size: 13px;
}

.upload-preview {
    text-align: center;
}

.preview-image-container {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    display: inline-block;
}

.preview-image-container img {
    max-width: 300px;
    max-height: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.preview-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.file-name {
    font-size: 14px;
    color: #475569;
}

.recognition-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.recognition-preview {
    position: relative;
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
}

.recognition-preview img {
    width: 100%;
    border-radius: 8px;
}

.recognition-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    pointer-events: none;
}

.recognition-results {
    padding: 16px;
}

.recognition-status {
    text-align: center;
    padding: 48px;
}

.recognition-status p {
    margin-top: 16px;
    color: #64748b;
}

.recognized-fields h4 {
    font-size: 16px;
    color: #1e293b;
    margin: 0 0 20px 0;
}

.field-group {
    margin-bottom: 16px;
}

.field-group label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.field-group input,
.field-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
}

.field-group .confidence {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: #22c55e;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 10px;
}

.create-customer-form {
    max-height: 60vh;
    overflow-y: auto;
}

.form-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.form-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 16px 0;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.half {
    grid-column: span 1;
}

.form-group.full {
    grid-column: span 2;
}

.form-group label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    background: white;
}

.attached-document {
    display: flex;
    gap: 16px;
    align-items: center;
}

.doc-preview {
    width: 80px;
    height: 100px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.doc-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doc-info {
    flex: 1;
}

.doc-name {
    display: block;
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
}

.doc-meta {
    font-size: 12px;
    color: #94a3b8;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    margin-top: 16px;
}

/* ========================================
   FULL CRM CUSTOMER PROFILE VIEW
   ======================================== */

.crm-profile-view {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f1f5f9;
    z-index: 9000;
}

.crm-profile-view.active {
    display: flex;
    flex-direction: column;
}

/* Task Hint Box - shown when opening from task */
.crm-task-hint {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 2px solid #f59e0b;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-hint-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #92400e;
}

.task-hint-header svg {
    color: #f59e0b;
}

.task-hint-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.task-hint-due {
    font-size: 13px;
    color: #92400e;
}

.task-hint-due.overdue {
    color: #dc2626;
    font-weight: 600;
}

.btn-ai-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #8b5cf6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ai-summary:hover {
    background: #7c3aed;
    transform: translateY(-1px);
}

/* AI Summary Modal */
.ai-summary-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ai-summary-modal {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ai-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

.ai-summary-header h3 {
    margin: 0;
    font-size: 18px;
}

.ai-summary-header button {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.8;
}

.ai-summary-header button:hover {
    opacity: 1;
}

.ai-summary-content {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

.ai-summary-content h4 {
    margin: 16px 0 8px 0;
    color: #1e293b;
    font-size: 15px;
}

.ai-summary-content h4:first-child {
    margin-top: 0;
}

.ai-summary-content p {
    color: #475569;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.ai-summary-content ul, .ai-summary-content ol {
    margin: 0 0 12px 0;
    padding-left: 20px;
    color: #475569;
}

.ai-summary-content li {
    margin-bottom: 6px;
    line-height: 1.5;
}

/* CRM main content wrapper */
.crm-profile-view.active > .crm-sidebar,
.crm-profile-view.active > .crm-main {
    /* Handled by flex */
}

.crm-profile-view .crm-content-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.crm-sidebar {
    width: 280px;
    background: white;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    overflow-y: auto;
}

.crm-customer-card {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 20px;
}

.customer-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    margin: 0 auto 12px;
}

.customer-main-info h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.customer-type-badge {
    display: inline-block;
    font-size: 11px;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.customer-id {
    font-size: 12px;
    color: #94a3b8;
}

.customer-status {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.status-badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

.status-badge.success {
    background: #dcfce7;
    color: #16a34a;
}

.status-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.dpd-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    background: #fef3c7;
    color: #d97706;
}

.crm-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #2563eb;
}

.crm-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crm-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    white-space: nowrap;
}

.crm-nav-item:hover {
    background: #f8fafc;
}

.crm-nav-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 500;
}

.close-crm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    margin-top: 16px;
    transition: all 0.2s ease;
}

.close-crm-btn:hover {
    background: #f1f5f9;
}

.crm-main {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.crm-section {
    display: none;
}

.crm-section.active {
    display: block;
}

.crm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.crm-section-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.section-actions {
    display: flex;
    gap: 12px;
}

.btn-danger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-warning:hover {
    background: #d97706;
}

/* ========================================
   EXPANDABLE DOCUMENT LIST
   ======================================== */

.document-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.document-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.document-item:hover {
    border-color: #cbd5e1;
}

.document-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.document-header:hover {
    background: #f8fafc;
}

.document-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}

.document-icon.danger {
    background: #fee2e2;
    color: #dc2626;
}

.document-icon.warning {
    background: #fef3c7;
    color: #d97706;
}

.document-icon.info {
    background: #dbeafe;
    color: #2563eb;
}

.document-info {
    flex: 1;
    min-width: 0;
}

.document-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.document-meta {
    display: block;
    font-size: 12px;
    color: #64748b;
}

.document-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.document-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f1f5f9;
    color: #64748b;
}

.document-badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

.document-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.document-badge.info {
    background: #dbeafe;
    color: #2563eb;
}

.expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    transition: all 0.3s ease;
}

.expand-icon svg {
    transition: transform 0.3s ease;
}

.document-item.expanded .expand-icon svg {
    transform: rotate(180deg);
}

.document-item.expanded .expand-icon {
    background: #3b82f6;
    color: white;
}

.document-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    background: #f8fafc;
    border-top: 1px solid transparent;
}

.document-item.expanded .document-content {
    max-height: 800px;
    border-top-color: #e2e8f0;
}

.document-preview {
    padding: 24px;
}

/* Letter Preview Styling */
.letter-preview {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 32px;
    font-family: 'Georgia', serif;
    font-size: 13px;
    line-height: 1.8;
    color: #334155;
    max-width: 700px;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.letter-header {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 32px;
    font-family: 'Arial', sans-serif;
}

.letter-recipient {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 24px;
    font-family: 'Arial', sans-serif;
}

.letter-date {
    text-align: right;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 24px;
    font-family: 'Arial', sans-serif;
}

.letter-subject {
    font-size: 14px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    font-family: 'Arial', sans-serif;
}

.letter-body p {
    margin: 0 0 12px 0;
}

/* Contract Summary */
.contract-summary {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px;
    max-width: 500px;
}

.contract-summary h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

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

.contract-table td {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.contract-table td:first-child {
    color: #64748b;
    width: 40%;
}

.contract-table td:last-child {
    font-weight: 500;
    color: #1e293b;
}

.document-toolbar {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
}

.doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.doc-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.doc-btn svg {
    width: 14px;
    height: 14px;
}

/* ========================================
   CREDIT PRODUCTS GRID & CHARTS
   ======================================== */

.credit-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.credit-product-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
}

.credit-product-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.credit-product-card.large {
    grid-column: span 2;
}

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

.credit-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
}

.credit-icon.kreditkarte { background: #dbeafe; color: #2563eb; }
.credit-icon.ratenkredit { background: #dcfce7; color: #16a34a; }
.credit-icon.dispo { background: #fef3c7; color: #d97706; }
.credit-icon.baufi { background: #f3e8ff; color: #9333ea; }

.credit-title {
    flex: 1;
}

.credit-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.credit-number {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.credit-status {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.credit-status.danger { background: #fee2e2; color: #dc2626; }
.credit-status.warning { background: #fef3c7; color: #d97706; }
.credit-status.success { background: #dcfce7; color: #16a34a; }

.credit-amounts {
    margin-bottom: 16px;
}

.credit-amount-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}

.credit-amount-row:last-child {
    border-bottom: none;
}

.credit-amount-row span:first-child {
    color: #64748b;
}

.credit-amount-row span:last-child {
    font-weight: 500;
    color: #1e293b;
}

.credit-amount-row.highlight {
    background: #f8fafc;
    margin: 0 -20px;
    padding: 8px 20px;
}

.credit-amount-row span.danger { color: #dc2626; }
.credit-amount-row span.warning { color: #d97706; }
.credit-amount-row span.success { color: #16a34a; }

/* Mini Charts */
.credit-chart {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

.chart-title {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.mini-chart {
    height: 50px;
    width: 100%;
    position: relative;
}

.mini-chart.large {
    height: 70px;
}

.mini-chart svg {
    width: 100%;
    height: 100%;
    max-height: 60px;
}

/* Fix for CRM credit product charts - prevent stretching */
.credit-product-card .mini-chart {
    height: 45px;
    max-width: 100%;
}

.credit-product-card .mini-chart svg {
    max-height: 45px;
}

.credit-product-card.large .mini-chart {
    height: 65px;
}

.credit-product-card.large .mini-chart svg {
    max-height: 65px;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #94a3b8;
    margin-top: 4px;
}

/* Credit Total Summary */
.credit-total-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 12px;
    color: white;
}

.total-item {
    text-align: center;
}

.total-label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.total-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.total-value.danger { color: #fca5a5; }
.total-value.success { color: #86efac; }

/* Transactions & Claims Grid */
.transactions-claims-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.transactions-panel,
.claims-panel {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

.transactions-panel h3,
.claims-panel h3 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 16px 0;
}

.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.transaction-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: #64748b;
}

.transaction-item.incoming .transaction-icon { background: #dcfce7; color: #16a34a; }
.transaction-item.outgoing .transaction-icon { background: #fee2e2; color: #dc2626; }
.transaction-item.failed .transaction-icon { background: #fef3c7; color: #d97706; }

.transaction-info {
    flex: 1;
}

.transaction-desc {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
}

.transaction-date {
    display: block;
    font-size: 11px;
    color: #64748b;
}

.transaction-amount {
    font-size: 14px;
    font-weight: 600;
}

.transaction-amount.positive { color: #16a34a; }
.transaction-amount.negative { color: #dc2626; }

/* Claims Breakdown */
.claims-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claim-bar {
    display: grid;
    grid-template-columns: 120px 1fr 80px;
    align-items: center;
    gap: 12px;
}

.claim-label {
    font-size: 12px;
    color: #64748b;
}

.claim-bar-container {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.claim-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.claim-bar-fill.danger { background: #ef4444; }
.claim-bar-fill.warning { background: #f59e0b; }
.claim-bar-fill.primary { background: #3b82f6; }
.claim-bar-fill.success { background: #22c55e; }

.claim-value {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
}

/* ========================================
   TRANSAKTIONEN & FORDERUNGEN - ENHANCED
   ======================================== */

/* Summary KPIs */
.trans-summary-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.trans-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.trans-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trans-kpi-icon.success {
    background: #dcfce7;
    color: #16a34a;
}

.trans-kpi-icon.danger {
    background: #fee2e2;
    color: #dc2626;
}

.trans-kpi-icon.primary {
    background: #dbeafe;
    color: #2563eb;
}

.trans-kpi-content {
    display: flex;
    flex-direction: column;
}

.trans-kpi-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.trans-kpi-value.success { color: #16a34a; }
.trans-kpi-value.danger { color: #dc2626; }

.trans-kpi-label {
    font-size: 12px;
    color: #64748b;
}

/* Payment Timeline Chart */
.payment-timeline-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

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

.timeline-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.timeline-legend {
    display: flex;
    gap: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #64748b;
}

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

.legend-item .dot.success { background: #22c55e; }
.legend-item .dot.danger { background: #ef4444; }
.legend-item .dot.primary { background: #3b82f6; }

.payment-timeline-chart {
    width: 100%;
    height: 200px;
}

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

/* Claims with Charts per Product */
.claims-with-charts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claim-product-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    transition: all 0.2s ease;
}

.claim-product-card:hover {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.claim-product-card.danger {
    border-left: 3px solid #ef4444;
}

.claim-product-card.warning {
    border-left: 3px solid #f59e0b;
}

.claim-product-card.primary {
    border-left: 3px solid #3b82f6;
}

.claim-product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.claim-product-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.claim-product-name svg {
    color: #64748b;
}

.claim-product-amount {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.claim-product-chart {
    height: 40px;
    margin-bottom: 8px;
}

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

.claim-product-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #64748b;
}

.claim-product-meta .status {
    font-weight: 600;
}

.claim-product-meta .status.danger { color: #dc2626; }
.claim-product-meta .status.warning { color: #d97706; }

/* Show All Transactions Button */
.btn-show-all-trans {
    width: 100%;
    padding: 10px;
    margin-top: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-show-all-trans:hover {
    background: #e2e8f0;
    color: #1e293b;
}

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

.overview-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.overview-card.highlight {
    border: 2px solid #fecaca;
    background: #fef2f2;
}

.overview-card .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.overview-card .card-icon.danger {
    background: #fee2e2;
    color: #dc2626;
}

.overview-card .card-icon.warning {
    background: #fef3c7;
    color: #d97706;
}

.overview-card .card-icon.info {
    background: #dbeafe;
    color: #2563eb;
}

.overview-card .card-content {
    flex: 1;
}

.overview-card .card-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.overview-card .card-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.overview-card .card-sub {
    display: block;
    font-size: 12px;
    color: #94a3b8;
}

/* Quick Links in Overview */
.overview-quick-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.quick-link-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-link-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.quick-link-card.highlight {
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border-color: #3b82f6;
}

.quick-link-card.highlight:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #dcfce7 100%);
}

.quick-link-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}

.quick-link-card.highlight .quick-link-icon {
    background: #3b82f6;
    color: white;
}

.quick-link-content {
    flex: 1;
    min-width: 0;
}

.quick-link-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.quick-link-desc {
    display: block;
    font-size: 12px;
    color: #64748b;
}

.quick-link-arrow {
    color: #94a3b8;
    flex-shrink: 0;
}

.quick-link-card:hover .quick-link-arrow {
    color: #3b82f6;
}

.overview-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ki-scores-card,
.recent-activity-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ki-scores-card h3,
.recent-activity-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 20px 0;
}

.ki-scores-grid {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.ki-score-item {
    text-align: center;
}

.score-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(
        var(--color) calc(var(--percentage) * 1%),
        #e2e8f0 calc(var(--percentage) * 1%)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    position: relative;
}

.score-circle::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
}

.score-circle span {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.score-label {
    font-size: 12px;
    color: #64748b;
}

.ki-recommendation-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon.outgoing {
    background: #dbeafe;
    color: #2563eb;
}

.activity-icon.incoming {
    background: #dcfce7;
    color: #16a34a;
}

.activity-icon.missed {
    background: #fee2e2;
    color: #dc2626;
}

.activity-content {
    flex: 1;
}

.activity-title {
    display: block;
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
}

.activity-date {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

.view-all-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    font-size: 13px;
    cursor: pointer;
    margin-top: 16px;
    transition: all 0.2s ease;
}

.view-all-btn:hover {
    background: #f1f5f9;
}

/* Responsive for CRM */
@media (max-width: 1024px) {
    .crm-profile-view {
        flex-direction: column;
    }

    .crm-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .crm-customer-card {
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .customer-avatar {
        margin: 0;
    }

    .crm-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .close-crm-btn {
        margin-top: 0;
    }

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

    .overview-row {
        grid-template-columns: 1fr;
    }

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

/* ========================================
   BANKEN CHAT WIDGET
   ======================================== */

.banken-chat-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border: none;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    z-index: 998;
}

.banken-chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
}

.banken-chat-toggle .chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #8b5cf6;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 8px;
}

.banken-chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 480px;
    height: 620px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    z-index: 999;
    overflow: hidden;
}

.banken-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.banken-chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
}

.banken-chat-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.banken-chat-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.banken-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f8fafc;
}

.banken-chat-welcome {
    text-align: center;
    padding: 30px 20px;
}

.banken-chat-welcome .welcome-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.banken-chat-welcome h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #1e293b;
}

.banken-chat-welcome p {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #64748b;
}

.welcome-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.welcome-examples .example-btn {
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.welcome-examples .example-btn:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.banken-chat-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.banken-chat-footer textarea {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    resize: none;
    max-height: 80px;
    outline: none;
    font-family: inherit;
}

.banken-chat-footer textarea:focus {
    border-color: #3b82f6;
}

.banken-chat-footer button {
    width: 44px;
    height: 44px;
    background: #3b82f6;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.banken-chat-footer button:hover {
    background: #2563eb;
}

.banken-chat-message {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.banken-chat-message.user {
    flex-direction: row-reverse;
}

.banken-chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #64748b;
}

.banken-chat-message.assistant .banken-chat-avatar {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
}

.banken-chat-bubble {
    max-width: 280px;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.banken-chat-message.user .banken-chat-bubble {
    background: #3b82f6;
    color: white;
    border-bottom-right-radius: 4px;
}

.banken-chat-message.assistant .banken-chat-bubble {
    background: white;
    color: #334155;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.banken-chat-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: white;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
}

.banken-chat-typing span {
    width: 8px;
    height: 8px;
    background: #94a3b8;
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.banken-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.banken-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* Chat Action Buttons */
.chat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin: 4px 4px 4px 0;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-action-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

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

/* Chat Export Buttons */
.chat-export-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.chat-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-export-btn.excel {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.chat-export-btn.excel:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.3);
}

.chat-export-btn.pdf {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.chat-export-btn.pdf:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.chat-export-btn svg {
    width: 14px;
    height: 14px;
}

/* Follow-up Suggestions after response */
.chat-followup-suggestions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.chat-followup-suggestions .followup-label {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.chat-followup-suggestions .followup-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chat-followup-suggestions .example-btn {
    padding: 6px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-followup-suggestions .example-btn:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* Chat Customer Links */
.chat-customer-link {
    color: #3b82f6;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dashed #3b82f6;
    transition: all 0.2s ease;
}

.chat-customer-link:hover {
    color: #1d4ed8;
    border-bottom-style: solid;
}

/* Chat Icons - Monochrome SVG-based icons */
.chat-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.chat-icon.chart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'%3E%3C/line%3E%3Cline x1='12' y1='20' x2='12' y2='4'%3E%3C/line%3E%3Cline x1='6' y1='20' x2='6' y2='14'%3E%3C/line%3E%3C/svg%3E");
}

.chat-icon.euro {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'%3E%3C/line%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'%3E%3C/path%3E%3C/svg%3E");
}

.chat-icon.clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}

.chat-icon.trend {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'%3E%3C/polyline%3E%3Cpolyline points='17 6 23 6 23 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.chat-icon.search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}

.chat-icon.payment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E");
}

.chat-icon.check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
}

.chat-icon.alert {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

.chat-icon.refresh {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'%3E%3C/polyline%3E%3Cpolyline points='1 20 1 14 7 14'%3E%3C/polyline%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'%3E%3C/path%3E%3C/svg%3E");
}

.chat-icon.list {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

.chat-icon.user {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
}

.chat-icon.x {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
}

.chat-icon.lightbulb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'%3E%3C/line%3E%3Cline x1='10' y1='22' x2='14' y2='22'%3E%3C/line%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'%3E%3C/path%3E%3C/svg%3E");
}

/* Color dots for segments */
.chat-icon.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.chat-icon.dot.red {
    background: #ef4444;
}

.chat-icon.dot.green {
    background: #22c55e;
}

.chat-icon.dot.amber {
    background: #f59e0b;
}

.chat-icon.dot.gray {
    background: #6b7280;
}

/* Make icons white in action buttons */
.chat-action-btn .chat-icon {
    filter: brightness(0) invert(1);
}

/* ========================================
   KONTEN & FINANZEN - KOMBINIERTE ANSICHT
   ======================================== */

/* Finanzen Overview Header - Clean Light Design */
.finanzen-overview {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    margin-bottom: 24px;
    padding: 0;
    align-items: stretch;
}

.finanzen-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.finanzen-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 20px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.finanzen-kpi .kpi-icon {
    color: #94a3b8;
    margin-bottom: 2px;
    width: 16px;
    height: 16px;
}

.finanzen-kpi .kpi-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.finanzen-kpi .kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
}

/* Forderungen Compact - Sidebar Card */
.forderungen-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    background: #fef2f2;
    border-radius: 10px;
    border: 1px solid #fecaca;
    min-width: 200px;
}

.forderungen-compact::before {
    content: 'Forderungsaufstellung';
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #991b1b;
    font-weight: 600;
    margin-bottom: 4px;
}

.forderung-breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 3px 0;
}

.forderung-breakdown-row .label {
    color: #64748b;
}

.forderung-breakdown-row .value {
    font-weight: 600;
    color: #1e293b;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
}

/* Einkommen & Ausgaben Compact */
.einkommen-ausgaben-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: #f0f9ff;
    border-radius: 10px;
    border: 1px solid #bae6fd;
    min-width: 200px;
}

.ea-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0369a1;
    font-weight: 600;
    margin-bottom: 4px;
}

.ea-header svg {
    width: 12px;
    height: 12px;
}

.ea-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 2px 0;
}

.ea-row .label {
    color: #64748b;
}

.ea-row .value {
    font-weight: 600;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 11px;
}

.ea-row .value.einkommen {
    color: #16a34a;
}

.ea-row .value.ausgaben {
    color: #dc2626;
}

.ea-row.differenz {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed #93c5fd;
}

.ea-row .value.positiv {
    color: #16a34a;
}

.ea-row .value.negativ {
    color: #dc2626;
}

.ea-details {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #bae6fd;
}

.ea-details .details-text {
    font-size: 10px;
    color: #64748b;
    line-height: 1.4;
}

/* Credit Products Large - Full Width Cards */
.credit-products-large {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.credit-product-large {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
}

.credit-product-large:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.credit-product-large.danger {
    border-left: 4px solid #ef4444;
}

.credit-product-large.warning {
    border-left: 4px solid #f59e0b;
}

.credit-product-large.primary {
    border-left: 4px solid #3b82f6;
}

/* Credit Product Header Large */
.credit-product-header-large {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.credit-product-header-large .credit-product-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.credit-product-large.danger .credit-product-icon {
    background: #fee2e2;
    color: #dc2626;
}

.credit-product-large.warning .credit-product-icon {
    background: #fef3c7;
    color: #d97706;
}

.credit-product-large.primary .credit-product-icon {
    background: #dbeafe;
    color: #2563eb;
}

.credit-product-info-large {
    flex: 1;
}

.credit-product-info-large .credit-product-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.credit-product-info-large .credit-product-number {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* Credit Amounts Inline */
.credit-amounts-inline {
    display: flex;
    gap: 24px;
}

.amount-item {
    text-align: center;
}

.amount-item .amount-label {
    display: block;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.amount-item .amount-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.amount-item .amount-value.danger {
    color: #dc2626;
}

/* Chart Container Large */
.chart-container-large {
    margin-top: 16px;
}

.chart-title {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 12px;
}

/* Chart with Axes - Modern Sharp Design */
.chart-with-axes {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: 1fr 28px;
    gap: 0;
}

.y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 10px;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    height: 160px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.chart-area {
    border-left: 2px solid #cbd5e1;
    border-bottom: 2px solid #cbd5e1;
    height: 160px;
    position: relative;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 0 4px 0 0;
}

.chart-area svg {
    width: 100%;
    height: 100%;
    shape-rendering: geometricPrecision;
}

.chart-area svg polyline {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-area svg text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
}

.x-axis {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    padding: 8px 4px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Chart Legend */
.chart-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #64748b;
}

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

.legend-item .dot.red { background: #ef4444; }
.legend-item .dot.green { background: #22c55e; }
.legend-item .dot.blue { background: #3b82f6; }
.legend-item .dot.orange { background: #f59e0b; }

.legend-item .line {
    width: 16px;
    height: 2px;
    background: #22c55e;
    border-radius: 1px;
}

.legend-item .line.green { background: #22c55e; }

.legend-item .area {
    width: 12px;
    height: 8px;
    background: rgba(245, 158, 11, 0.4);
    border: 1px solid #f59e0b;
    border-radius: 2px;
}

/* Credit Products Compact (for remaining products) */
.credit-products-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.credit-product-compact {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
}

.credit-product-compact.danger {
    border-left: 3px solid #ef4444;
}

.credit-product-compact.warning {
    border-left: 3px solid #f59e0b;
}

.compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.compact-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.compact-details {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #64748b;
}

.compact-amount {
    font-weight: 500;
    color: #475569;
}

/* Transaktionen Compact */
.transaktionen-compact {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
}

.transaktionen-compact h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px 0;
}

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

.tx-compact-item {
    display: grid;
    grid-template-columns: 80px 1fr 100px 80px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
}

.tx-compact-item.failed {
    background: #fef2f2;
}

.tx-compact-item.success {
    background: #f0fdf4;
}

.tx-date {
    color: #64748b;
    font-size: 12px;
}

.tx-desc {
    color: #1e293b;
}

.tx-amount {
    text-align: right;
    font-weight: 600;
}

.tx-amount.positive { color: #16a34a; }
.tx-amount.negative { color: #dc2626; }

.tx-status-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
}

.tx-status-badge.failed {
    background: #fee2e2;
    color: #dc2626;
}

.tx-status-badge.success {
    background: #dcfce7;
    color: #16a34a;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .finanzen-overview {
        flex-direction: column;
    }
    
    .finanzen-kpis {
        flex-wrap: wrap;
    }
    
    .credit-products-compact {
        grid-template-columns: 1fr;
    }
    
    .tx-compact-item {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    
    .chart-with-axes {
        grid-template-columns: 40px 1fr;
    }
    
    .y-axis {
        font-size: 9px;
    }
    
    .x-axis {
        font-size: 9px;
    }
}

/* ========================================
   VIEW TOGGLE & CREDIT TABLES
   ======================================== */

/* View Toggle Button Group */
.view-toggle {
    display: flex;
    gap: 2px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
    margin-left: auto;
}

.toggle-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #475569;
}

.toggle-btn.active {
    background: white;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toggle-btn svg {
    width: 16px;
    height: 16px;
}

/* Credit Views */
.credit-view {
    display: none;
}

.credit-view.active {
    display: block;
}

/* Credit Transaction Table */
.credit-tx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.credit-tx-table thead {
    background: #f8fafc;
}

.credit-tx-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: #475569;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.credit-tx-table td {
    padding: 12px 16px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

.credit-tx-table tbody tr:hover {
    background: #f8fafc;
}

.credit-tx-table .highlight-row {
    background: #fef2f2;
}

.credit-tx-table .highlight-row:hover {
    background: #fee2e2;
}

.credit-tx-table .negative {
    color: #dc2626;
    font-weight: 600;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.credit-tx-table .positive {
    color: #16a34a;
    font-weight: 600;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

/* Transaction Badge */
.tx-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #f1f5f9;
    color: #475569;
}

.tx-badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

.tx-badge.success {
    background: #dcfce7;
    color: #16a34a;
}

.tx-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

/* Update chart-container-large for better spacing */
.chart-container-large {
    margin-top: 0;
}

/* Credit Product Header Large - Fix alignment with toggle */
.credit-product-header-large {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Ensure status badge doesn't push toggle */
.credit-product-header-large .credit-status-badge {
    flex-shrink: 0;
}

/* Chart Labels and Points (outside SVG) */
.chart-limit-label {
    position: absolute;
    right: 8px;
    top: 5px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 1;
}

.chart-limit-label.danger {
    background: #fee2e2;
    color: #dc2626;
}

.chart-limit-label.warning {
    background: #fef3c7;
    color: #d97706;
}

.chart-point {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, 50%);
    z-index: 2;
    box-shadow: 0 0 0 2px white;
}

.chart-point.green {
    background: #22c55e;
}

.chart-point.red {
    background: #ef4444;
}

/* Ensure chart-area is positioned for absolute children */
.chart-area {
    position: relative;
}

/* ========================================
   LETTER MODAL (Full Letter View)
   ======================================== */

.letter-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 20px;
}

.letter-modal {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.letter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.letter-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.letter-modal-close {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.letter-modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.letter-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.full-letter-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.letter-sender,
.letter-recipient {
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
}

.letter-date {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
}

.letter-subject {
    font-size: 16px;
    color: #1e293b;
    margin-bottom: 20px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.letter-text {
    font-size: 14px;
    line-height: 1.8;
    color: #334155;
}

.letter-text p {
    margin-bottom: 16px;
}

.email-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.email-meta {
    font-size: 13px;
    line-height: 1.8;
    color: #64748b;
}

.letter-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 16px 16px;
}

.letter-modal-footer .btn-primary,
.letter-modal-footer .btn-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.letter-modal-footer .btn-secondary {
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.letter-modal-footer .btn-secondary:hover {
    background: #f1f5f9;
    color: #334155;
}

.letter-modal-footer .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    color: white;
}

.letter-modal-footer .btn-primary:hover {
    filter: brightness(1.1);
}

/* ========================================
   MODAL HEADER ACTIONS
   ======================================== */

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-open-crm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-open-crm:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-open-crm svg {
    flex-shrink: 0;
}

/* ========================================
   KI SUMMARY CARD (Popup Modal)
   ======================================== */

.ki-summary-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #7dd3fc;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.ki-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #0284c7;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(125, 211, 252, 0.5);
}

.ki-summary-header svg {
    color: #0284c7;
}

.ki-summary-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.ki-summary-section {
    background: white;
    border-radius: 8px;
    padding: 12px;
}

.ki-summary-section h5 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ki-summary-section h5 svg {
    color: #64748b;
}

.ki-summary-section p {
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
    margin: 0;
}

.ki-summary-section ul {
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
    margin: 0;
    padding-left: 16px;
}

.ki-summary-section li {
    margin-bottom: 4px;
}

/* AI Summary Modal Styling Update */
.ai-summary-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 100%;
}

.ai-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px 12px 0 0;
}

.ai-summary-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #0284c7;
}

.ai-summary-header button {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.ai-summary-header button:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

.ai-summary-content {
    padding: 20px;
}

.ai-summary-content h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-summary-content h4 svg {
    color: #64748b;
}

.ai-summary-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
    margin: 0 0 16px 0;
}

.ai-summary-content ul,
.ai-summary-content ol {
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
    margin: 0 0 16px 0;
    padding-left: 20px;
}

.ai-summary-content li {
    margin-bottom: 6px;
}

.ai-summary-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    padding: 20px;
}

/* CRM KI-Analyse Section */
.crm-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.ki-factors-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 20px;
}

.ki-factors-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 16px 0;
}

.ki-factors-card .factor-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ki-factors-card .factor-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
}

.ki-factors-card .factor-item svg {
    flex-shrink: 0;
}

.ki-factors-card .factor-item.negative svg {
    color: #ef4444;
}

.ki-factors-card .factor-item.positive svg {
    color: #22c55e;
}

.ki-factors-card .factor-impact {
    margin-left: auto;
    font-weight: 600;
    font-size: 12px;
}

.ki-factors-card .factor-item.negative .factor-impact {
    color: #ef4444;
}

.ki-factors-card .factor-item.positive .factor-impact {
    color: #22c55e;
}

.recommendation-steps-inline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.recommendation-steps-inline .step-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 14px;
    color: #334155;
}

.recommendation-steps-inline .step-item.urgent {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
}

.recommendation-steps-inline .step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #e2e8f0;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
}

.recommendation-steps-inline .step-item.urgent .step-num {
    background: #ef4444;
    color: white;
}

/* ========================================
   FEEDBACK SYSTEM STYLES
   ======================================== */

/* Floating Feedback Button */
.feedback-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    transition: all 0.3s ease;
    z-index: 9998;
}

.feedback-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(99, 102, 241, 0.5);
}

.feedback-button svg {
    color: white;
}

.feedback-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* Feedback Panel */
.feedback-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.feedback-panel.open {
    right: 0;
}

.feedback-panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.feedback-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.feedback-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.feedback-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    color: white;
    transition: background 0.2s;
}

.feedback-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.feedback-info {
    padding: 12px 20px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.feedback-info p {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}

/* Feedback Form */
.feedback-form {
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.feedback-form-row {
    margin-bottom: 12px;
}

.feedback-form-row label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.feedback-form-row input,
.feedback-form-row select,
.feedback-form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.feedback-form-row input:focus,
.feedback-form-row select:focus,
.feedback-form-row textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.feedback-form-row textarea {
    resize: vertical;
    min-height: 80px;
}

/* Author Select Wrapper */
.feedback-author-select {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feedback-author-select select {
    flex: 1;
}

.feedback-author-select input {
    flex: 1;
}

/* Type Buttons */
.feedback-type-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.feedback-type-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: white;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.feedback-type-btn svg {
    flex-shrink: 0;
    color: #64748b;
}

.feedback-type-btn:hover {
    border-color: #6366f1;
    background: #f8fafc;
}

.feedback-type-btn.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

.feedback-type-btn.active svg {
    color: white;
}

/* Submit Button */
.feedback-submit-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.feedback-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Feedback List */
.feedback-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.feedback-list-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.feedback-export-btn {
    padding: 6px 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
}

.feedback-export-btn:hover {
    border-color: #6366f1;
    color: #6366f1;
}

.feedback-list {
    padding: 12px 20px;
    padding-bottom: 40px; /* Extra Platz am Ende für besseres Scrollen */
}

.feedback-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 13px;
}

/* Feedback Items */
.feedback-item {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    border-left: 3px solid #e2e8f0;
}

.feedback-item.verbesserung {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.feedback-item.fehler {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.feedback-item.frage {
    border-left-color: #3b82f6;
    background: #eff6ff;
}

.feedback-item.lob {
    border-left-color: #22c55e;
    background: #f0fdf4;
}

.feedback-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.feedback-item-type {
    display: flex;
    align-items: center;
    color: #64748b;
}

.feedback-item-type svg {
    width: 14px;
    height: 14px;
}

.feedback-item-author {
    font-weight: 600;
    font-size: 13px;
    color: #334155;
}

.feedback-item-area {
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    color: #64748b;
}

.feedback-item-date {
    font-size: 11px;
    color: #94a3b8;
    margin-left: auto;
}

.feedback-item-text {
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    white-space: pre-wrap;
}

/* Notification Toast */
.feedback-notification {
    position: fixed;
    bottom: 100px;
    right: 24px;
    background: #22c55e;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10000;
}

.feedback-notification.show {
    transform: translateY(0);
    opacity: 1;
}

/* Feedback Item - Clickable */
.feedback-item {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.feedback-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Image Indicator */
.feedback-has-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: white;
    border-radius: 4px;
    padding: 2px 4px;
    margin-left: 4px;
}

/* Replies Indicator */
.feedback-has-replies {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #10b981;
    color: white;
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 600;
}

.feedback-has-replies svg {
    width: 10px;
    height: 10px;
}

/* Feedback Detail Modal */
.feedback-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.feedback-detail-modal.open {
    opacity: 1;
    visibility: visible;
}

.feedback-detail-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s;
}

.feedback-detail-modal.open .feedback-detail-content {
    transform: scale(1);
}

.feedback-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.feedback-detail-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.feedback-detail-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    color: white;
    transition: background 0.2s;
}

.feedback-detail-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.feedback-detail-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.feedback-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.feedback-detail-author {
    font-weight: 600;
    color: #1e293b;
}

.feedback-detail-type {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.feedback-detail-type.verbesserung {
    background: #fef3c7;
    color: #92400e;
}

.feedback-detail-type.fehler {
    background: #fee2e2;
    color: #991b1b;
}

.feedback-detail-type.frage {
    background: #dbeafe;
    color: #1e40af;
}

.feedback-detail-type.lob {
    background: #dcfce7;
    color: #166534;
}

.feedback-detail-area {
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 12px;
    font-size: 12px;
    color: #64748b;
}

.feedback-detail-date {
    font-size: 12px;
    color: #94a3b8;
    margin-left: auto;
}

.feedback-detail-text {
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
    white-space: pre-wrap;
    margin-bottom: 16px;
}

.feedback-detail-screenshot {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.feedback-detail-screenshot img {
    width: 100%;
    display: block;
    cursor: pointer;
}

.feedback-detail-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.feedback-detail-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.feedback-detail-btn.edit {
    background: #6366f1;
    color: white;
}

.feedback-detail-btn.edit:hover {
    background: #4f46e5;
}

.feedback-detail-btn.delete {
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.feedback-detail-btn.delete:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* Feedback Replies */
.feedback-replies {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.replies-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 12px 0;
}

.replies-title svg {
    color: #6366f1;
}

.feedback-reply {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    border-left: 3px solid #6366f1;
}

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

.reply-author {
    font-weight: 600;
    font-size: 13px;
    color: #334155;
}

.reply-date {
    font-size: 12px;
    color: #94a3b8;
}

.reply-text {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

/* Reply Form */
.feedback-reply-form {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.reply-form-title {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 12px 0;
}

.reply-author-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.reply-author-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s;
}

.reply-author-select:focus {
    outline: none;
    border-color: #6366f1;
}

.reply-author-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    transition: border-color 0.2s;
}

.reply-author-input:focus {
    outline: none;
    border-color: #6366f1;
}

.reply-text-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    min-height: 60px;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}

.reply-text-input:focus {
    outline: none;
    border-color: #6366f1;
}

.reply-submit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.reply-submit-btn:hover {
    background: #4f46e5;
}

/* ========================================
   HAUSHALTSRECHNUNG TAB STYLES
   ======================================== */

.haushalt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.haushalt-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.haushalt-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

.haushalt-title svg {
    color: #6366f1;
}

.psd2-badge, .fida-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.haushalt-period {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

.haushalt-period select {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.haushalt-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    margin-bottom: 20px;
}

.haushalt-info-box svg {
    color: #0284c7;
    flex-shrink: 0;
    margin-top: 2px;
}

.haushalt-info-box p {
    margin: 0;
    font-size: 13px;
    color: #0c4a6e;
    line-height: 1.5;
}

/* Summary Grid */
.haushalt-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.haushalt-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s;
}

.haushalt-summary-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.haushalt-summary-card.income {
    border-left: 4px solid #22c55e;
}

.haushalt-summary-card.expense {
    border-left: 4px solid #ef4444;
}

.haushalt-summary-card.balance {
    border-left: 4px solid #3b82f6;
}

.haushalt-summary-card.ratio {
    border-left: 4px solid #f59e0b;
}

.summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.haushalt-summary-card.income .summary-icon {
    background: #dcfce7;
    color: #16a34a;
}

.haushalt-summary-card.expense .summary-icon {
    background: #fee2e2;
    color: #dc2626;
}

.haushalt-summary-card.balance .summary-icon {
    background: #dbeafe;
    color: #2563eb;
}

.haushalt-summary-card.ratio .summary-icon {
    background: #fef3c7;
    color: #d97706;
}

.summary-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-label {
    font-size: 12px;
    color: #64748b;
}

.summary-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.summary-detail {
    font-size: 11px;
    color: #94a3b8;
}

/* Details Grid */
.haushalt-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.haushalt-detail-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.haushalt-detail-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.haushalt-detail-card h4 svg {
    color: #6366f1;
}

.haushalt-breakdown {
    padding: 12px 16px;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.breakdown-row:last-child {
    border-bottom: none;
}

.breakdown-row.total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 2px solid #e2e8f0;
    border-bottom: none;
}

.breakdown-label {
    font-size: 13px;
    color: #475569;
}

.breakdown-value {
    font-size: 13px;
    font-weight: 600;
    color: #22c55e;
}

.breakdown-value.negative {
    color: #ef4444;
}

.breakdown-row.total .breakdown-label,
.breakdown-row.total .breakdown-value {
    font-weight: 700;
}

/* Assessment Section */
.haushalt-assessment {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.haushalt-assessment h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.haushalt-assessment h4 svg {
    color: #22c55e;
}

.assessment-content {
    padding: 20px;
}

.assessment-indicator {
    margin-bottom: 16px;
}

.indicator-bar {
    height: 12px;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 33%, #22c55e 66%, #10b981 100%);
    border-radius: 6px;
    position: relative;
    margin-bottom: 8px;
}

.indicator-fill {
    position: absolute;
    left: 0;
    top: -4px;
    width: 4px;
    height: 20px;
    background: #1e293b;
    border-radius: 2px;
    transition: left 0.5s ease;
}

.indicator-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
}

.assessment-text {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
}

/* ========================================
   GUV (GEWINN- UND VERLUSTRECHNUNG) TAB STYLES - Gewerbekunden
   ======================================== */

.guv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.guv-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guv-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

.guv-title svg {
    color: #059669;
}

.guv-badge {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.guv-period {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

.guv-period select {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.guv-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    margin-bottom: 20px;
}

.guv-info-box svg {
    color: #059669;
    flex-shrink: 0;
    margin-top: 2px;
}

.guv-info-box p {
    margin: 0;
    font-size: 13px;
    color: #14532d;
    line-height: 1.5;
}

/* GuV Summary Grid */
.guv-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.guv-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s;
}

.guv-summary-card .summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guv-summary-card.revenue .summary-icon {
    background: #dcfce7;
    color: #16a34a;
}

.guv-summary-card.expense .summary-icon {
    background: #fee2e2;
    color: #dc2626;
}

.guv-summary-card.profit .summary-icon {
    background: #dbeafe;
    color: #2563eb;
}

.guv-summary-card.ratio .summary-icon {
    background: #fef3c7;
    color: #d97706;
}

/* GuV Details Grid */
.guv-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.guv-detail-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.guv-detail-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.guv-detail-card h4 svg {
    color: #64748b;
}

.guv-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Liquidität Section */
.guv-liquidity-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

.guv-liquidity-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
}

.guv-liquidity-section h4 svg {
    color: #6366f1;
}

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

.liquidity-item {
    background: #f8fafc;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}

.liquidity-item.warning {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.liquidity-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.liquidity-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.liquidity-value.negative {
    color: #dc2626;
}

.liquidity-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 13px;
    color: #991b1b;
}

.liquidity-warning svg {
    color: #dc2626;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .guv-summary-grid,
    .liquidity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .guv-details-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   OPEN FINANCE TAB STYLES
   ======================================== */

.openfinance-header {
    padding: 16px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.openfinance-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.openfinance-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

.openfinance-title svg {
    color: #6366f1;
}

/* Consent Card */
.openfinance-consent-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.consent-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.consent-header svg {
    color: #6366f1;
}

.consent-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.consent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e2e8f0;
}

.consent-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: white;
}

.consent-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

.consent-item.active .consent-status {
    color: #16a34a;
}

.consent-item.pending .consent-status {
    color: #d97706;
}

.consent-item.inactive .consent-status {
    color: #dc2626;
}

.consent-label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.consent-detail {
    font-size: 12px;
    color: #64748b;
}

/* Open Finance Section */
.openfinance-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.openfinance-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.openfinance-section h4 svg {
    color: #6366f1;
}

.openfinance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.openfinance-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.openfinance-table td {
    padding: 12px 16px;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}

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

.openfinance-table tr:hover {
    background: #f8fafc;
}

.openfinance-table td.positive {
    color: #16a34a;
    font-weight: 600;
}

.openfinance-table td.negative {
    color: #dc2626;
    font-weight: 600;
}

/* Debt Overview */
.openfinance-summary {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.openfinance-summary h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.openfinance-summary h4 svg {
    color: #ef4444;
}

.debt-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #e2e8f0;
}

.debt-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: white;
    text-align: center;
}

.debt-card.total {
    background: #fef2f2;
}

.debt-card.ratio {
    background: #fef3c7;
}

.debt-label {
    font-size: 12px;
    color: #64748b;
}

.debt-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.debt-card.total .debt-value {
    color: #dc2626;
}

/* Responsive */
@media (max-width: 1200px) {
    .haushalt-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .haushalt-details-grid {
        grid-template-columns: 1fr;
    }

    .consent-grid {
        grid-template-columns: 1fr;
    }

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

/* ========================================
   SCREENSHOT ANNOTATION SYSTEM
   ======================================== */

/* Screenshot Button in Feedback Form */
.feedback-screenshot-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feedback-screenshot-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-screenshot-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #475569;
}

.feedback-screenshot-btn svg {
    flex-shrink: 0;
}

/* Screenshot Preview */
.feedback-screenshot-preview {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.feedback-screenshot-preview img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.screenshot-edit-btn,
.screenshot-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.screenshot-edit-btn:hover {
    background: #f1f5f9;
    border-color: #3b82f6;
    color: #3b82f6;
}

.screenshot-remove-btn:hover {
    background: #fef2f2;
    border-color: #ef4444;
    color: #ef4444;
}

/* Screenshot Modal */
.screenshot-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.screenshot-modal.open {
    display: flex;
}

.screenshot-modal-content {
    background: white;
    border-radius: 16px;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.screenshot-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.screenshot-modal-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.screenshot-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.screenshot-modal-close:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Screenshot Toolbar */
.screenshot-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.screenshot-tools {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.screenshot-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.screenshot-tool:hover {
    background: #f1f5f9;
    color: #3b82f6;
}

.screenshot-tool.active {
    background: #3b82f6;
    color: white;
}

/* Color Palette */
.screenshot-colors {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.screenshot-color {
    width: 28px;
    height: 28px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.screenshot-color:hover {
    transform: scale(1.15);
}

.screenshot-color.active {
    border-color: #1e293b;
    box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor;
}

/* Undo/Clear Actions */
.screenshot-actions-left {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.screenshot-undo,
.screenshot-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.screenshot-undo:hover {
    background: #f1f5f9;
    border-color: #3b82f6;
    color: #3b82f6;
}

.screenshot-clear:hover {
    background: #fef2f2;
    border-color: #ef4444;
    color: #ef4444;
}

/* Canvas Container */
.screenshot-canvas-container {
    flex: 1;
    overflow: auto;
    padding: 20px;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screenshot-canvas-container canvas {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    cursor: crosshair;
}

/* Modal Footer */
.screenshot-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.screenshot-cancel-btn {
    padding: 10px 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.screenshot-cancel-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.screenshot-save-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.screenshot-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Feedback Item with Screenshot */
.feedback-item-screenshot {
    margin-top: 10px;
}

.feedback-item-screenshot img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-item-screenshot img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Screenshot Lightbox */
.screenshot-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 40px;
    cursor: zoom-out;
}

.screenshot-lightbox.open {
    display: flex;
}

.screenshot-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* Spin Animation for Loading */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* Feedback Item Actions */
.feedback-item-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.feedback-item:hover .feedback-item-actions {
    opacity: 1;
}

.feedback-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.feedback-action-btn.edit:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

.feedback-action-btn.delete:hover {
    background: #fef2f2;
    border-color: #ef4444;
    color: #ef4444;
}

/* Feedback Item Header Update */
.feedback-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Feedback List Header Actions */
.feedback-list-actions {
    display: flex;
    gap: 8px;
}

.feedback-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.feedback-refresh-btn:hover {
    background: #e2e8f0;
    color: #3b82f6;
}

.feedback-refresh-btn:active svg {
    animation: spin 0.5s ease;
}

/* ========================================
   ENHANCED MOBILE STYLES (480px and below)
   ======================================== */

@media (max-width: 480px) {
    /* General Layout */
    .main-content {
        padding: 10px !important;
    }

    .section-card, .dashboard-card, .kpi-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
    }

    .section-header h2, .card-title {
        font-size: 16px !important;
    }

    .section-header p {
        font-size: 12px !important;
    }

    /* Bank Selection Grid */
    .bank-selection-grid,
    .bank-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .bank-card {
        padding: 12px !important;
        flex-direction: row !important;
        gap: 10px !important;
    }

    .bank-logo {
        width: 40px !important;
        height: 40px !important;
    }

    .bank-info h3 {
        font-size: 14px !important;
    }

    .bank-info p {
        font-size: 11px !important;
    }

    /* KPIs and Stats */
    .kpi-grid, .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .kpi-value, .stat-value {
        font-size: 20px !important;
    }

    .kpi-label, .stat-label {
        font-size: 11px !important;
    }

    /* Tables */
    .data-table, .bank-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .data-table th, .data-table td,
    .bank-table th, .bank-table td {
        padding: 8px 6px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Form Elements */
    .form-group {
        margin-bottom: 12px !important;
    }

    .form-group label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px 12px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }

    /* Buttons */
    .btn, .action-btn, button {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    .btn-group {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .btn-group .btn {
        width: 100% !important;
    }

    /* Chart Containers */
    .chart-container {
        height: 200px !important;
        min-height: 180px !important;
    }

    /* Tabs */
    .tab-nav, .tabs-nav {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .tab-btn, .tab-item {
        padding: 8px 12px !important;
        font-size: 12px !important;
        flex: 1 1 auto !important;
        min-width: 80px !important;
        text-align: center !important;
    }

    /* Modal Adjustments */
    .modal-content {
        width: 95% !important;
        max-height: 90vh !important;
        margin: 10px !important;
        border-radius: 12px !important;
    }

    .modal-header {
        padding: 12px 16px !important;
    }

    .modal-header h2, .modal-header h3 {
        font-size: 16px !important;
    }

    .modal-body {
        padding: 12px 16px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }

    .modal-footer {
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Haushalt Summary */
    .haushalt-summary-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .haushalt-card {
        padding: 10px !important;
    }

    .haushalt-card .value {
        font-size: 18px !important;
    }

    /* Debt Cards */
    .debt-overview-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .debt-card {
        padding: 10px !important;
    }

    .debt-label {
        font-size: 11px !important;
    }

    .debt-value {
        font-size: 16px !important;
    }

    /* Customer Selection */
    .customer-search-container {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .customer-search-input {
        width: 100% !important;
    }

    .customer-list {
        max-height: 250px !important;
    }

    .customer-item {
        padding: 10px !important;
    }

    /* Screenshot Modal */
    .screenshot-modal-content {
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    .screenshot-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .screenshot-tools, .screenshot-colors {
        justify-content: center !important;
    }

    .screenshot-actions-left {
        margin-left: 0 !important;
        justify-content: center !important;
    }

    /* Consent Grid */
    .consent-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Filter Section */
    .filter-row, .filter-group {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .filter-row > *, .filter-group > * {
        width: 100% !important;
    }

    /* Progress Bars */
    .progress-bar {
        height: 8px !important;
    }

    /* Sidebar Adjustments */
    .sidebar {
        width: 100% !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
    }

    .sidebar.open {
        transform: translateX(0) !important;
    }

    /* Navigation */
    .nav-item {
        padding: 12px 16px !important;
    }

    .nav-item span {
        font-size: 13px !important;
    }
}

/* Extra Small Phones (360px and below) */
@media (max-width: 360px) {
    .section-card, .dashboard-card {
        padding: 10px !important;
    }

    .section-header h2 {
        font-size: 14px !important;
    }

    .kpi-grid, .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .kpi-value {
        font-size: 18px !important;
    }

    .debt-overview-grid {
        grid-template-columns: 1fr !important;
    }

    .btn, .action-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .tab-btn, .tab-item {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    .modal-content {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
    }
}

/* Touch Device Enhancements */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn, .action-btn, button,
    .tab-btn, .nav-item, .bank-card {
        min-height: 44px !important;
    }

    /* Remove hover states that don't work on touch */
    .bank-card:hover,
    .btn:hover,
    .nav-item:hover {
        transform: none !important;
    }

    /* Active states for touch feedback */
    .bank-card:active,
    .btn:active {
        opacity: 0.8 !important;
        transform: scale(0.98) !important;
    }

    /* Larger checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
    }

    /* Better scrolling */
    .data-table, .customer-list, .modal-body {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ========================================
   CUSTOMER OVERVIEW HEADER (AI + Actions)
   ======================================== */

.customer-overview-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
}

/* AI Summary Card */
.ai-summary-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 16px;
}

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

.ai-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.ai-label {
    font-size: 14px;
    font-weight: 600;
    color: #0369a1;
    flex: 1;
}

.ai-refresh-btn {
    background: none;
    border: none;
    color: #0369a1;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.ai-refresh-btn:hover {
    background: rgba(3, 105, 161, 0.1);
}

.ai-summary-content {
    margin-bottom: 12px;
}

.ai-summary-text {
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
    margin: 0;
}

.ai-recommendation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: white;
    border-left: 3px solid #f59e0b;
    border-radius: 0 8px 8px 0;
}

.recommendation-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.recommendation-indicator.danger {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.recommendation-indicator.warning {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.recommendation-indicator.info {
    background: #3b82f6;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
}

.recommendation-indicator.success {
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.recommendation-indicator.muted {
    background: #64748b;
    box-shadow: 0 0 6px rgba(100, 116, 139, 0.3);
}

.recommendation-text {
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    line-height: 1.4;
}

/* Quick Actions */
.customer-quick-actions {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.quick-actions-title {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 12px 0;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #475569;
}

.quick-action-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.quick-action-btn svg {
    color: #64748b;
}

.quick-action-btn span {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

.quick-action-btn.danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.quick-action-btn.danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.quick-action-btn.danger svg {
    color: #dc2626;
}

.quick-action-btn.danger span {
    color: #dc2626;
}

/* Customer Action Modal */
.customer-action-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.customer-action-modal.open {
    opacity: 1;
    visibility: visible;
}

.action-modal-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.customer-action-modal.open .action-modal-content {
    transform: scale(1);
}

.action-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.action-modal-header .action-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-modal-header .action-icon.warning {
    background: #fef3c7;
    color: #d97706;
}

.action-modal-header .action-icon.danger {
    background: #fee2e2;
    color: #dc2626;
}

.action-modal-header .action-icon.info {
    background: #dbeafe;
    color: #2563eb;
}

.action-modal-header h3 {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
}

.action-modal-close {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
}

.action-modal-close:hover {
    background: #f1f5f9;
}

.action-modal-body {
    padding: 20px;
}

.action-form-group {
    margin-bottom: 16px;
}

.action-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.action-form-group input,
.action-form-group select,
.action-form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.action-form-group input:focus,
.action-form-group select:focus,
.action-form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.action-modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 16px 16px;
}

.action-modal-footer button {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-action {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
}

.btn-cancel-action:hover {
    background: #f3f4f6;
}

.btn-confirm-action {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn-confirm-action:hover {
    background: #2563eb;
}

.btn-confirm-action.danger {
    background: #dc2626;
}

.btn-confirm-action.danger:hover {
    background: #b91c1c;
}

@media (max-width: 768px) {
    .customer-overview-header {
        grid-template-columns: 1fr;
    }

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

/* ========================================
   NEUE MATRIX ACHSEN UND GESAMTSUMME
   ======================================== */

/* Matrix with Axes - Flexbox Layout (dynamisch) */
.matrix-with-axes {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.axis-y-label {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    padding: 20px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    min-width: 30px;
}

.matrix-main-area {
    flex: 1;
}

.axis-x-label {
    display: flex;
    justify-content: space-between;
    padding: 12px 8px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid #e2e8f0;
}

/* Matrix Gesamtsumme */
.matrix-total-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 20px;
    margin-top: 16px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.matrix-total-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.matrix-total-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.matrix-total-value {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

.matrix-total-divider {
    color: #94a3b8;
    font-size: 14px;
}

/* ========================================
   EHEMALIGE FÄLLE DRAWER
   ======================================== */

/* Trigger Button (ersetzt Sidebar) */
.ehemalige-trigger-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
    font-family: inherit;
}

.ehemalige-trigger-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3);
}

.ehemalige-trigger-btn svg {
    flex-shrink: 0;
}

.ehemalige-trigger-count {
    font-size: 18px;
    font-weight: 700;
}

.ehemalige-trigger-label {
    font-size: 12px;
    opacity: 0.85;
}

.ehemalige-trigger-volume {
    font-size: 13px;
    font-weight: 600;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.3);
}

/* Drawer Overlay */
.ehemalige-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ehemalige-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Drawer Panel */
.ehemalige-drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: white;
    z-index: 1001;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.ehemalige-drawer.open {
    right: 0;
}

.ehemalige-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
}

.drawer-title-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-title-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.drawer-subtitle {
    font-size: 12px;
    opacity: 0.8;
    margin: 2px 0 0 0;
}

.drawer-close-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.drawer-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ehemalige-drawer-stats {
    display: flex;
    gap: 20px;
    padding: 20px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.drawer-stat {
    flex: 1;
    text-align: center;
}

.drawer-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}

.drawer-stat-label {
    display: block;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.ehemalige-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.ehemalige-drawer-content .ehemalige-item {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
}

.ehemalige-drawer-content .ehemalige-item:hover {
    border-color: #22c55e;
}

.ehemalige-item-amount.success {
    color: #22c55e;
}

.ehemalige-drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.ehemalige-drawer-footer .btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ehemalige-drawer-footer .btn-primary:hover {
    background: #2563eb;
}

/* Matrix Grid ohne Sidebar */
.matrix-ehemalige-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

/* ========================================
   MINI DONUT CHART FÜR VERZUGSTAGE
   ======================================== */

.dpd-mini-donut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.dpd-mini-donut:hover {
    transform: scale(1.05);
}

.donut-chart {
    width: 52px;
    height: 52px;
}

.donut-segment {
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.donut-segment:hover {
    opacity: 0.8;
}

.donut-center-text {
    font-size: 9px;
    font-weight: 700;
    fill: #1e293b;
}

.donut-legend {
    display: flex;
    gap: 6px;
}

.legend-item {
    font-size: 9px;
    font-weight: 500;
    padding: 2px 5px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.legend-item.green {
    background: #dcfce7;
    color: #16a34a;
}

.legend-item.amber {
    background: #fef3c7;
    color: #d97706;
}

.legend-item.red {
    background: #fee2e2;
    color: #dc2626;
}

.legend-item:hover {
    transform: scale(1.1);
}

/* ========================================
   SORTABLE TABLE HEADERS
   ======================================== */

.customer-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px;
    transition: background 0.2s ease;
}

.customer-table th.sortable:hover {
    background: #e2e8f0;
}

.customer-table th.sortable .sort-icon::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #94a3b8;
}

.customer-table th.sortable.sort-asc .sort-icon::after {
    content: '↑';
    color: #3b82f6;
}

.customer-table th.sortable.sort-desc .sort-icon::after {
    content: '↓';
    color: #3b82f6;
}