/* Nebenkostenabrechnung Page Specific Styles */

/* Professional Financial Report Styling */
.financial-table {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 0.375rem;
    overflow: hidden;
}

.financial-table .table-dark th {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
    border: none;
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Level-specific styling improvements */
.level-1-row {
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
    border-left: 0.25rem solid #0891b2;
}

.level-2-row {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-left: 0.1875rem solid #0284c7;
}

.level-3-row {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 0.125rem solid #f59e0b;
}

.level-4-row {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border-left: 0.0625rem solid #9e9e9e;
}

/* Visual grouping for QM and Personen categories */
.level-4-row.qm-group {
    border-top: 0.0625rem solid #cffafe;
}

.level-4-row.personen-group {
    border-top: 0.0625rem solid #e0f2fe;
}

/* Enhanced hierarchy badges */
.hierarchy-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.75rem;
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2);
}

.hierarchy-badge.level-1 { background: #0891b2; color: white; }
.hierarchy-badge.level-2 { background: #0284c7; color: white; }
.hierarchy-badge.level-3 { background: #f59e0b; color: white; }
.hierarchy-badge.level-4 { background: #616161; color: white; }

/* Typography improvements */
.category-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
    line-height: 1.5;
    letter-spacing: -0.011em;
}

.amount-text {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
    font-weight: 500;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Hover effects for better UX */
.financial-table tbody tr:hover {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}

/* QR Code styling */
.qr-code-container {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.qr-code-container:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    transform: translateY(-0.125rem);
}

#qrcode-zahlungshinweis img {
    display: block;
    margin: 0 auto;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .table th, .table td {
        padding: 0.5rem 0.25rem;
        font-size: 0.85rem;
    }

    .hierarchy-badge {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.7rem;
        margin-right: 0.5rem;
    }

    .ps-3 { padding-left: 1rem !important; }
    .ps-4 { padding-left: 1.5rem !important; }
    .ps-5 { padding-left: 2rem !important; }
    .ps-6 { padding-left: 2.5rem !important; }
    .ps-7 { padding-left: 3rem !important; }

    /* Responsive adjustments for payment section */
    .qr-code-container {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}