/* Dashboard Styles */
.dashboard-wrapper {
    background: var(--background-light);
    min-height: calc(100vh - 80px);
    padding: 3rem 0;
    padding-top: calc(80px + 3rem); /* Space for fixed navbar */
    overflow-x: hidden;
    max-width: 100vw;
}

/* Welcome Section */
.welcome-section {
    margin-bottom: 3rem;
}

.welcome-section h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.welcome-section p {
    font-size: 1.15rem;
    color: var(--text-light);
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.card-full-width {
    grid-column: 1 / -1;
}

/* Dashboard Cards */
.dashboard-card {
    background: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow);
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    transition: all 0.2s;
}

.dashboard-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-top-color: var(--accent-color);
}

.card-highlight {
    border-left: 4px solid var(--primary-color);
}

.card-header {
    display: flex;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.card-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    background: var(--status-info-bg);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Badge positioned top-left on card icon (desktop) */
.card-icon .section-count-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 0.7rem;
    margin: 0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Card icons use consistent styling like metric-icon */

.card-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.card-header p {
    font-size: 0.95rem;
    color: var(--text-light);
}

/* Pending plans close button */
.pending-plans-close-btn {
    margin-left: auto;
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pending-plans-close-btn:hover {
    background: var(--gray-100);
    color: var(--text-dark);
}

.pending-plans-close-btn:active {
    transform: scale(0.95);
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card-description {
    color: var(--text-light);
    line-height: 1.6;
}

/* Amount Display */
.amount-display {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 1.5rem;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.amount-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
}

.amount-value {
    color: var(--white);
    font-size: 2.5rem;
    font-weight: 800;
}

/* Case Items - New Design */
.case-item {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0;
    margin-bottom: 1.25rem;
    transition: border-color 0.3s, box-shadow 0.3s;
    overflow: hidden;
}

.case-item.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.case-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.case-header-row:hover {
    background: var(--background-light);
}

.case-main-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.case-status-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.case-title {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.case-number {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1.125rem;
}

.case-creditor {
    color: var(--text-light);
    font-size: 0.95rem;
}

.case-summary-info {
    text-align: right;
}

.case-amount-large {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 0.375rem;
}

.case-meta {
    color: var(--text-light);
    font-size: 0.875rem;
}

.case-details-expanded {
    border-top: 1px solid var(--border-color);
    background: var(--background-light);
    padding: 0;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* Tabs */
.case-tabs {
    display: flex;
    gap: 0;
    background: var(--white);
    padding: 0 1.5rem;
}

.tab-btn {
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-light);
    transition: all 0.3s;
}

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

.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-content {
    padding: 1.5rem;
}

.case-breakdown {
    background: var(--white);
    border-radius: 0;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Case Details */
.case-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row.total-row {
    border-top: 2px solid var(--border-color);
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-size: 1.05rem;
}

.detail-label {
    color: var(--text-light);
    font-weight: 500;
}

.detail-value {
    color: var(--text-dark);
    font-weight: 600;
}

/* Payment Plan Info */
.payment-plan-info {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0.02) 100%);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 0;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(37, 99, 235, 0.15);
    font-weight: 600;
    color: var(--text-dark);
}

.plan-status {
    background: var(--primary-color);
    color: var(--white);
    padding: 0.375rem 0.875rem;
    border-radius: 0;
    font-size: 0.875rem;
}

.plan-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plan-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plan-item span {
    color: var(--text-light);
}

.plan-item strong {
    color: var(--text-dark);
}

/* Case Documents */
.case-documents {
    margin-bottom: 1.5rem;
}

.case-documents h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.document-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    text-align: left;
}

.document-item:hover {
    border-color: var(--primary-color);
    background: var(--background-light);
    transform: translateX(4px);
}

.doc-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.doc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.doc-name {
    font-weight: 600;
    color: var(--text-dark);
}

.doc-meta {
    font-size: 0.875rem;
    color: var(--text-light);
}

.doc-action {
    font-size: 1.5rem;
    color: var(--primary-color);
}

/* Payment Summary Box */
.payment-summary-box {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0.02) 100%);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 0;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.summary-label {
    font-size: 0.875rem;
    color: var(--text-light);
    font-weight: 500;
}

.summary-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* Payment Timeline */
.payment-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.payment-timeline.scrollable {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.payment-timeline.scrollable::-webkit-scrollbar {
    width: 8px;
}

.payment-timeline.scrollable::-webkit-scrollbar-track {
    background: var(--background-light);
    border-radius: 0;
}

.payment-timeline.scrollable::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 0;
}

.payment-timeline.scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* Documents List Styles */
.documents-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.document-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.document-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), #5a78ff);
    color: white;
    border-radius: 8px;
    font-size: 1.1rem;
}

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

.document-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.document-type-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--gray-100);
    color: var(--text-dark);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.document-size,
.document-date {
    font-size: 0.8rem;
    color: var(--text-light);
}

.btn-document-download {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-document-download:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.btn-document-download i {
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .document-item {
        flex-wrap: wrap;
    }

    .document-info {
        flex: 1 1 calc(100% - 60px);
    }

    .btn-document-download {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
}

.timeline-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
    padding: 0.75rem 0;
}

.timeline-divider::before,
.timeline-divider::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid var(--border-color);
}

.timeline-divider span {
    padding: 0 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--white);
    border-radius: 0;
    border-left: 3px solid var(--border-color);
}

.timeline-item.future {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.03);
}

.timeline-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-info-bg);
    color: var(--primary-color);
    font-size: 1.8rem;
}

.timeline-icon.success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 2px solid #16a34a;
}

.timeline-icon.info {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color);
}

.timeline-icon.upcoming {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 2px solid #f59e0b;
}

.timeline-content {
    flex: 1;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.timeline-title {
    font-weight: 600;
    color: var(--text-dark);
}

.timeline-amount {
    font-weight: 700;
    font-size: 1.125rem;
}

.timeline-amount.success {
    color: #16a34a;
}

.timeline-amount.pending {
    color: #f59e0b;
}

.timeline-meta {
    font-size: 0.875rem;
    color: var(--text-light);
}

.timeline-download {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s;
}

.timeline-download:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* Case Actions */
.case-actions {
    display: flex;
    gap: 1rem;
}

.case-actions button {
    flex: 1;
}

/* Total Summary - Elegant */
.total-summary-elegant {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 2px solid var(--border-color);
    border-radius: 0;
    margin-top: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s;
}

.total-summary-elegant:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.summary-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.summary-icon-large {
    font-size: 3.5rem;
    opacity: 0.9;
}

.summary-text {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.summary-subtitle {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-amount-large {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
}

.summary-meta {
    font-size: 0.875rem;
    color: var(--text-light);
}

.summary-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.btn-pay-all-elegant {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.btn-pay-all-elegant .btn-icon {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.75);
    opacity: 1;
    transition: color 0.2s ease;
    background: transparent;
    border: none;
    width: auto;
    height: auto;
}

.btn-pay-all-elegant:hover .btn-icon {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}

.action-hint {
    font-size: 0.75rem;
    color: var(--text-light);
    font-style: italic;
}

/* Completed Case Styles */
.case-completed {
    opacity: 0.85;
    border-color: #e2e8f0;
}

.case-completed:hover {
    opacity: 1;
}

.status-completed {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

.case-amount-completed {
    font-size: 1.25rem;
    font-weight: 700;
    color: #16a34a;
}

.completion-message {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.02) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 0;
    margin-bottom: 1.5rem;
}

.completion-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.completion-message h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.completion-message p {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.6;
}

.completion-summary {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.02) 100%);
    border-color: rgba(34, 197, 94, 0.2);
}

.completed-text {
    color: #16a34a;
}

.btn-large {
    padding: 1.25rem 2rem;
    font-size: 1.15rem;
}

/* Payment Options */
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-dark);
}

.option-icon {
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Payment History */
.payment-history {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 0;
}

.history-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 0;
    flex-shrink: 0;
}

.date-day {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.date-month {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
}

.history-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.history-title {
    font-weight: 600;
    color: var(--text-dark);
}

.history-description {
    font-size: 0.875rem;
    color: var(--text-light);
}

.history-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Messages */
.messages-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 0;
}

.message-avatar {
    width: 48px;
    height: 48px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.message-content {
    flex: 1;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.message-sender {
    font-weight: 600;
    color: var(--text-dark);
}

.message-time {
    font-size: 0.875rem;
    color: var(--text-light);
}

.message-text {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--background-light);
    border: 2px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    color: var(--text-dark);
}

.action-button:hover {
    border-color: var(--primary-color);
    background: var(--white);
    transform: translateY(-2px);
}

.action-icon {
    font-size: 2rem;
}

/* Contact Info */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-item {
    display: flex;
    align-items: start;
    gap: 1rem;
}

.contact-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.contact-item strong {
    display: block;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.contact-item p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* Chat Container */
.chat-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--background-light);
    border-radius: 0;
}

/* Chat dato separator */
.chat-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    position: relative;
}

.chat-date-separator::before,
.chat-date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.chat-date-separator span {
    padding: 0.25rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    background: var(--background-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sagsinfo i chat beskeder */
.message-case-info {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: auto;
}

.chat-message.received .message-case-info {
    background: var(--gray-100);
    color: var(--text-light);
}

.chat-message.sent .message-case-info {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

/* Chat sagsvalg dropdown */
.chat-case-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.chat-case-selector label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
}

.chat-case-dropdown {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-dark);
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-case-dropdown:hover {
    border-color: var(--primary-color);
}

.chat-case-dropdown:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(88, 102, 242, 0.1);
}

.chat-message {
    display: flex;
    width: 100%;
}

.chat-message.received {
    justify-content: flex-start;
}

.chat-message.sent {
    justify-content: flex-end;
}

.message-bubble {
    max-width: 70%;
    padding: 1rem 1.25rem;
    border-radius: 0;
    box-shadow: var(--shadow);
}

.chat-message.received .message-bubble {
    background: var(--white);
    border-bottom-left-radius: 4px;
}

.chat-message.sent .message-bubble {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-bottom-right-radius: 4px;
    color: var(--white);
}

.message-sender-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 1rem;
}

.sender-name {
    font-weight: 700;
    font-size: 0.875rem;
}

.chat-message.received .sender-name {
    color: var(--text-dark);
}

.chat-message.sent .sender-name {
    color: rgba(255, 255, 255, 0.9);
}

.message-timestamp {
    font-size: 0.7rem;
    margin-top: 0.5rem;
    text-align: right;
}

.chat-message.received .message-timestamp {
    color: var(--text-light);
}

.chat-message.sent .message-timestamp {
    color: rgba(255, 255, 255, 0.7);
}

.message-text {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.chat-message.received .message-text {
    color: var(--text-dark);
}

.chat-message.sent .message-text {
    color: var(--white);
}

.chat-input-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-input {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 0;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    transition: border-color 0.3s;
}

.chat-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.btn-send {
    align-self: flex-end;
    padding: 0.875rem 2rem;
}

/* Skjul ikon på desktop, vis kun tekst */
.btn-send i {
    display: none;
}

/* New message notification indicator */
.card-chat.has-new-message {
    border-top-color: var(--accent-color);
    animation: pulse-border 1s ease-in-out 3;
}

.card-chat.has-new-message .card-header .card-icon {
    animation: pulse-icon 0.5s ease-in-out 3;
}

@keyframes pulse-border {
    0%, 100% {
        box-shadow: var(--shadow);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(88, 102, 242, 0.3), var(--shadow);
    }
}

@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Contact Section */
.contact-section {
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

.contact-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.contact-item-compact {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 0;
    transition: all 0.3s;
}

.contact-item-compact:hover {
    background: var(--white);
    box-shadow: var(--shadow);
}

.contact-icon-small {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
}

.contact-value:hover {
    color: var(--primary-color);
}

/* ========================================
   BANK-STYLE CONTACT SECTION
   ======================================== */

/* Bank Color Variables */
:root {
    --bank-primary: #003366;
    --bank-primary-light: #0052a3;
    --bank-card-bg: #ffffff;
    --bank-border: #e6e9ed;
    --bank-text-dark: #172b4d;
    --bank-text-light: #6b778c;
}

/* Container */
.bank-contact-section {
    background: var(--bank-card-bg);
    border: 1px solid var(--bank-border);
    margin-top: 2rem;
    overflow: hidden;
}

.bank-contact-section.compact {
    margin-top: 0;
}

/* Header */
.bank-contact-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bank-border);
    background: #fafbfc;
}

.bank-contact-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bank-contact-title i {
    font-size: 1.1rem;
    color: var(--bank-primary);
}

.bank-contact-title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bank-text-dark);
    margin: 0;
}

.bank-contact-subtitle {
    display: block;
    font-size: 0.85rem;
    color: var(--bank-text-light);
    margin-top: 0.25rem;
    padding-left: 1.85rem;
}

/* Grid Layout (Dashboard) */
.bank-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

/* Individual Contact Cards */
.bank-contact-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bank-card-bg);
    border-right: 1px solid var(--bank-border);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}

.bank-contact-card:last-child {
    border-right: none;
}

.bank-contact-card:hover {
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.02) 0%, rgba(0, 82, 163, 0.02) 100%);
}

.bank-contact-card:hover .bank-contact-action {
    opacity: 1;
    transform: translateX(0);
}

/* Contact Icon - Match card-icon style */
.bank-contact-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: var(--status-info-bg);
    color: var(--primary-color);
}

/* Contact Content */
.bank-contact-content {
    flex: 1;
    min-width: 0;
}

.bank-contact-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bank-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.bank-contact-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bank-text-dark);
    text-decoration: none;
    transition: color 0.2s;
}

a.bank-contact-value:hover,
.bank-contact-card:hover .bank-contact-value {
    color: var(--bank-primary);
}

.bank-contact-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--bank-text-light);
    margin-top: 0.35rem;
}

.bank-contact-meta i {
    font-size: 0.7rem;
}

/* Contact Action Arrow */
.bank-contact-action {
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.2s ease;
    color: var(--bank-primary);
}

/* Document Notice */
.bank-document-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #fffbeb;
    border-top: 1px solid #fcd34d;
    font-size: 0.85rem;
    color: var(--bank-text-dark);
}

.bank-document-notice i {
    color: #b45309;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.bank-document-notice a {
    color: #92400e;
    font-weight: 500;
}

.bank-document-notice a:hover {
    text-decoration: underline;
}

.bank-document-notice.compact {
    font-size: 0.8rem;
    padding: 0.875rem 1.25rem;
}

/* ========================================
   COMPACT LIST LAYOUT (Profile Page)
   ======================================== */

.bank-contact-list {
    display: flex;
    flex-direction: column;
}

.bank-contact-list-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bank-border);
    text-decoration: none;
    transition: all 0.2s ease;
}

.bank-contact-list-item:last-child {
    border-bottom: none;
}

.bank-contact-list-item:hover {
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.02) 0%, rgba(0, 82, 163, 0.02) 100%);
}

.bank-contact-list-item:hover .bank-contact-arrow {
    opacity: 1;
    transform: translateX(0);
}

.bank-contact-icon-sm {
    width: 40px;
    height: 40px;
    background: var(--status-info-bg);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.bank-contact-list-content {
    flex: 1;
    min-width: 0;
}

.bank-contact-value-sm {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bank-text-dark);
}

.bank-contact-list-item:hover .bank-contact-value-sm {
    color: var(--bank-primary);
}

.bank-contact-meta-sm {
    display: block;
    font-size: 0.75rem;
    color: var(--bank-text-light);
    margin-top: 0.15rem;
}

.bank-contact-arrow {
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.2s ease;
    color: var(--bank-text-light);
    font-size: 0.75rem;
}

.bank-contact-list-item:hover .bank-contact-arrow {
    color: var(--bank-primary);
}

/* ========================================
   BANK CONTACT RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 968px) {
    .bank-contact-grid {
        grid-template-columns: 1fr;
    }

    .bank-contact-card {
        border-right: none;
        border-bottom: 1px solid var(--bank-border);
    }

    .bank-contact-card:last-child {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .bank-contact-header {
        padding: 1rem 1.25rem;
    }

    .bank-contact-card {
        padding: 1.25rem;
    }

    .bank-contact-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .bank-contact-value {
        font-size: 0.9rem;
    }

    .bank-contact-subtitle {
        display: none;
    }

    .bank-document-notice {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .bank-contact-header {
        padding: 0.875rem 1rem;
    }

    .bank-contact-card {
        padding: 1rem;
        gap: 0.75rem;
    }

    .bank-contact-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .bank-contact-icon-sm {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .bank-contact-list-item {
        padding: 0.875rem 1rem;
    }
}

/* Buttons */
.btn-full {
    width: 100%;
    text-align: center;
}

/* User Name in Nav */
.user-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
}

/* Responsive Design */
@media (max-width: 968px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .welcome-section {
        margin-top: 2rem;
    }

    .welcome-section h1 {
        font-size: 2rem;
    }

    .amount-value {
        font-size: 2rem;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

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

    .total-amount {
        font-size: 2rem;
    }
}

@media (max-width: 640px) {
    .dashboard-wrapper {
        padding: 1.5rem 0 2rem 0;
        padding-top: calc(60px + 2rem);
    }

    .welcome-section {
        margin-top: 2rem;
        margin-bottom: 1.5rem;
    }

    .welcome-section h1 {
        font-size: 1.5rem;
    }

    .welcome-section p {
        font-size: 0.9rem;
    }

    .dashboard-card {
        padding: 1.25rem;
    }

    .card-icon {
        font-size: 1.5rem;
    }

    .card-header h2 {
        font-size: 1.1rem;
    }

    .amount-value {
        font-size: 1.5rem;
    }

    .history-item {
        flex-wrap: wrap;
    }

    .history-amount {
        width: 100%;
        text-align: right;
    }

    .case-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .case-summary-info {
        width: 100%;
        text-align: left;
    }

    .case-amount-large {
        font-size: 1.5rem;
    }

    .tab-content {
        padding: 1rem;
    }

    .payment-plan-info {
        padding: 1rem;
    }

    .plan-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .total-summary-elegant {
        flex-direction: column;
        gap: 2rem;
        padding: 1.75rem;
    }

    .summary-left {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .summary-actions {
        width: 100%;
        align-items: center;
    }

    .btn-pay-all-elegant {
        width: 100%;
        justify-content: center;
    }

    .summary-amount-large {
        font-size: 2rem;
    }

    .btn-large {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .payment-summary-box {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .chat-messages {
        max-height: 300px;
        padding: 1rem;
    }

    .message-bubble {
        max-width: 85%;
    }

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

/* ========================================
   COMPANY DASHBOARD STYLES
   ======================================== */

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow);
    padding: 1.75rem;
    display: flex;
    align-items: start;
    gap: 1.25rem;
    transition: all 0.3s;
}

.stat-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.stat-card.stat-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.stat-card.stat-primary .stat-content {
    color: var(--white);
}

.stat-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.stat-card.stat-primary .stat-icon {
    filter: brightness(0) invert(1);
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card.stat-primary .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
}

.stat-card.stat-primary .stat-value {
    color: var(--white);
}

.stat-change {
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-change.positive {
    color: #10b981;
}

.stat-change.negative {
    color: #10b981;
}

.stat-meta {
    font-size: 0.875rem;
    color: var(--text-light);
}

/* Quick Actions Bar */
.quick-actions-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: all 0.3s;
}

.quick-action-btn:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.quick-action-btn.primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.quick-action-btn.primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.action-icon {
    font-size: 1.25rem;
}

/* Company Case Table */
.company-case-table {
    overflow-x: auto;
}

.cases-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.cases-table thead {
    background: var(--background-light);
}

.cases-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

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

.cases-table tbody tr:hover {
    background: var(--background-light);
}

.cases-table td {
    padding: 1.25rem 1rem;
}

.case-number-link {
    color: var(--primary-color);
    font-weight: 700;
    cursor: pointer;
}

.case-number-link:hover {
    text-decoration: underline;
}

.debtor-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.debtor-name {
    font-weight: 600;
    color: var(--text-dark);
}

.debtor-cpr {
    font-size: 0.875rem;
    color: var(--text-light);
}

.collected-amount {
    color: #10b981;
    font-weight: 600;
}

.btn-icon-small {
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.2s;
    border-radius: 0;
}

.btn-icon-small:hover {
    background: var(--background-light);
}

/* Card Actions */
.card-actions {
    margin-left: auto;
}

.filter-select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--white);
    cursor: pointer;
    transition: all 0.3s;
}

.filter-select:hover {
    border-color: var(--primary-color);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Table Pagination */
.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-color);
}

.pagination-info {
    color: var(--text-light);
    font-size: 0.95rem;
}

.pagination-controls {
    display: flex;
    gap: 0.5rem;
}

.pagination-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    background: var(--white);
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-dark);
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--white);
}

.pagination-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

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

/* Chart Container */
.chart-container {
    padding: 1.5rem 0;
}

.chart-bar-graph {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    height: 250px;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 0;
}

.bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.bar {
    width: 100%;
    background: linear-gradient(to top, var(--primary-color), var(--primary-dark));
    border-radius: 8px 8px 0 0;
    position: relative;
    transition: all 0.3s;
    min-height: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.5rem;
}

.bar:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.bar.active {
    background: linear-gradient(to top, #10b981, #059669);
}

.bar-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--white);
}

.bar-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.chart-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-color);
}

.summary-stat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.summary-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
}

/* Debtor List */
.debtor-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.debtor-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 0;
    transition: all 0.3s;
}

.debtor-item:hover {
    background: var(--white);
    box-shadow: var(--shadow);
}

.debtor-avatar {
    width: 48px;
    height: 48px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.debtor-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.debtor-name-main {
    font-weight: 700;
    color: var(--text-dark);
}

.debtor-meta {
    font-size: 0.875rem;
    color: var(--text-light);
}

.debtor-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.amount-total {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
}

.amount-collected {
    font-size: 0.875rem;
    color: #10b981;
}

.amount-collected.completed {
    color: #10b981;
}

.amount-collected.pending {
    color: #f59e0b;
}

.btn-full-width {
    width: 100%;
}

/* Activity Timeline */
.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.activity-item {
    display: flex;
    gap: 1rem;
    align-items: start;
}

.activity-icon {
    width: 48px;
    height: 48px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    background: var(--background-light);
}

.activity-icon.success {
    background: #d1fae5;
}

.activity-icon.info {
    background: #dbeafe;
}

.activity-icon.completed {
    background: #d1fae5;
}

.activity-icon.new {
    background: #e0e7ff;
}

.activity-icon.warning {
    background: #fef3c7;
}

.activity-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}

.activity-title {
    font-weight: 700;
    color: var(--text-dark);
}

.activity-time {
    font-size: 0.875rem;
    color: var(--text-light);
    white-space: nowrap;
}

.activity-description {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Responsive - Company Dashboard */
@media (max-width: 968px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-actions-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-summary {
        grid-template-columns: 1fr;
    }
}

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

    .quick-actions-bar {
        flex-direction: column;
    }

    .quick-action-btn {
        width: 100%;
        justify-content: center;
    }

    .company-case-table {
        font-size: 0.875rem;
    }

    .cases-table th,
    .cases-table td {
        padding: 0.75rem 0.5rem;
    }

    .table-pagination {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pagination-controls {
        justify-content: center;
        flex-wrap: wrap;
    }

    .chart-bar-graph {
        height: 200px;
        gap: 0.5rem;
    }

    .bar-value {
        font-size: 0.75rem;
    }

    .debtor-item {
        flex-wrap: wrap;
    }

    .debtor-amount {
        width: 100%;
        align-items: flex-start;
        margin-top: 0.5rem;
    }

    .activity-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .activity-time {
        align-self: flex-start;
    }
}

/* ========================================
   NEW FEATURES - CHART.JS & PAGES
   ======================================== */

/* Modern Chart Containers */
.chart-container-modern {
    height: 250px;
    position: relative;
}

.chart-container-pie {
    height: 200px;
    position: relative;
    margin-bottom: 1rem;
}

/* Custom Chart Legend */
.chart-legend-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding-top: 1rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 0;
    flex-shrink: 0;
}

/* Trend Indicator */
.trend-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 0;
    margin-top: 1rem;
}

.trend-indicator.positive {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.trend-indicator.negative {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.trend-arrow {
    font-size: 1.25rem;
    font-weight: bold;
}

.trend-text {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Status Overview Grid */
.status-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.status-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: all 0.3s;
    border-left: 4px solid transparent;
}

.status-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.status-card.status-dispute {
    border-left-color: #ef4444;
}

.status-card.status-court {
    border-left-color: #8b5cf6;
}

.status-card.status-payment {
    border-left-color: #10b981;
}

.status-card-icon {
    font-size: 2.5rem;
}

.status-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.status-card-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
}

.status-card-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
}

.status-card-amount {
    font-size: 0.875rem;
    color: var(--text-light);
}

.status-card-arrow {
    font-size: 1.5rem;
    color: var(--text-light);
    transition: transform 0.3s;
}

.status-card:hover .status-card-arrow {
    transform: translateX(5px);
    color: var(--primary-color);
}

/* Phase Badges */
.phase-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.phase-badge.phase-payment {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.phase-badge.phase-dispute {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.phase-badge.phase-court {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.phase-badge.phase-done {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Status Badges - Extended */
.status-badge.status-dispute {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.status-badge.status-court {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

/* Upcoming Payments List */
.upcoming-payments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.upcoming-payment-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 0;
    transition: all 0.3s;
}

.upcoming-payment-item:hover {
    background: var(--white);
    box-shadow: var(--shadow);
}

.payment-date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 0;
    flex-shrink: 0;
}

.payment-day {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.payment-month {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.payment-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.payment-debtor {
    font-weight: 700;
    color: var(--text-dark);
}

.payment-case {
    font-size: 0.875rem;
    color: var(--text-light);
}

.payment-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-color);
}

.upcoming-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-radius: 0;
    font-weight: 600;
}

.upcoming-total strong {
    font-size: 1.25rem;
    color: var(--primary-color);
}

/* Card Link */
.btn-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.btn-link:hover {
    color: var(--primary-dark);
}

/* Activity Icon Extensions */
.activity-icon.court {
    background: #ede9fe;
}

/* ========================================
   PAGE HEADERS & OVERVIEW PAGES
   ======================================== */

.page-header-enhanced {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.page-header-icon {
    font-size: 3.5rem;
}

.page-header-content h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.page-header-content p {
    font-size: 1.1rem;
    color: var(--text-light);
}

.dispute-header {
    border-left: 5px solid #ef4444;
}

.court-header {
    border-left: 5px solid #8b5cf6;
}

.payment-header {
    border-left: 5px solid #10b981;
}

/* Overview Stats Grid */
.overview-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.overview-stat-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow);
}

.overview-stat-card.dispute {
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
    border-left: 4px solid #ef4444;
}

.overview-stat-card.court {
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
    border-left: 4px solid #8b5cf6;
}

.overview-stat-card.payment {
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
    border-left: 4px solid #10b981;
}

.overview-stat-card.success {
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
    border-left: 4px solid #10b981;
}

.stat-icon-large {
    font-size: 2.5rem;
}

.stat-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-details .stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-dark);
}

.stat-details .stat-label {
    font-size: 0.875rem;
    color: var(--text-light);
    font-weight: 500;
}

/* Filter Bar */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-group label {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
}

/* ========================================
   DISPUTE CARDS
   ======================================== */

.dispute-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0;
    border-top: 3px solid var(--primary-color);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.2s;
}

.dispute-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-top-color: var(--accent-color);
}

.dispute-card.resolved {
    opacity: 0.85;
    background: #f8fafc;
}

.dispute-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
}

.dispute-card.resolved .dispute-header-row {
    background: #f1f5f9;
    border-bottom-color: var(--border-color);
}

.dispute-case-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dispute-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dispute-badge.new {
    background: #fef3c7;
    color: #92400e;
}

.dispute-badge.investigating {
    background: #e0f2fe;
    color: #0369a1;
}

.dispute-badge.resolved {
    background: #10b981;
    color: white;
}

.dispute-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
}

.dispute-body {
    padding: 1.5rem;
}

.dispute-debtor {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
}

.dispute-debtor strong {
    font-size: 1.125rem;
    color: var(--text-dark);
}

.dispute-debtor span {
    font-size: 0.875rem;
    color: var(--text-light);
}

.dispute-reason {
    background: var(--background-light);
    padding: 1.25rem;
    border-radius: 0;
    margin-bottom: 1.25rem;
}

.dispute-reason h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.dispute-reason p {
    font-style: italic;
    color: var(--text-light);
    line-height: 1.6;
}

.dispute-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

.dispute-documents {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.doc-tag {
    padding: 0.5rem 0.875rem;
    background: var(--background-light);
    border-radius: 0;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.doc-tag.uploaded {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.doc-tag.warning {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.dispute-resolution {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.05);
    border-radius: 0;
}

.resolution-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.resolution-badge.rejected {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.resolution-text {
    color: var(--text-light);
    font-size: 0.95rem;
}

.dispute-actions {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--background-light);
    border-top: 1px solid var(--border-color);
}

/* ========================================
   COURT/FOGED CASE CARDS
   ======================================== */

.alert-banner {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 2px solid #8b5cf6;
    border-radius: 0;
    margin-bottom: 2rem;
}

.alert-banner.court-alert {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.alert-icon {
    font-size: 2.5rem;
}

.alert-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.court-dates-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.court-date-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.date-badge {
    padding: 0.5rem 1rem;
    background: #8b5cf6;
    color: white;
    border-radius: 0;
    font-weight: 700;
    font-size: 0.875rem;
}

.court-name {
    font-weight: 600;
    color: var(--text-dark);
}

.case-ref {
    color: var(--text-light);
    font-size: 0.95rem;
}

.time-badge {
    padding: 0.25rem 0.75rem;
    background: var(--white);
    border-radius: 0;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.court-case-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s;
}

.court-case-card:hover {
    box-shadow: var(--shadow-lg);
}

/* Court Case Notes - for case-details page */
.court-case-notes {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
}

.court-case-notes strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.court-case-notes p {
    margin-top: 0.5rem;
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.5;
}

.court-case-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* Case Alerts - Notification banners for case-details page */
.case-alerts-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.case-alerts-container:empty {
    display: none;
}

.case-alert {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    transition: all 0.2s;
}

.case-alert:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.case-alert-court {
    border-left-color: #8b5cf6;
}

.case-alert-court .alert-icon {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.case-alert-dispute {
    border-left-color: var(--status-pending);
}

.case-alert-dispute .alert-icon {
    background: var(--status-pending-bg);
    color: var(--status-pending);
}

.alert-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

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

.alert-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.alert-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.alert-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.alert-details strong {
    color: var(--text-dark);
    font-weight: 600;
}

.alert-reason {
    flex-basis: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.alert-action:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

/* Dispute Card Styling - for case-details page (legacy, kan fjernes senere) */
.dispute-reason-box {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--status-pending-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--status-pending);
}

.dispute-reason-box strong,
.dispute-resolution-box strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dispute-reason-box p,
.dispute-resolution-box p {
    margin-top: 0.5rem;
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.5;
}

.dispute-resolution-box {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--status-success-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--status-success);
}

.dispute-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.court-case-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.court-phase-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.court-phase-badge.scheduled {
    background: #f59e0b;
    color: white;
}

.court-phase-badge.pending {
    background: #6b7280;
    color: white;
}

.court-phase-badge.enforcement {
    background: #8b5cf6;
    color: white;
}

.case-amount-display {
    text-align: right;
}

.case-amount-display .amount-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
}

.case-amount-display .amount-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
}

.court-case-body {
    padding: 1.5rem;
}

.court-case-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.info-block h4 {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.info-block p {
    color: var(--text-dark);
    font-size: 0.95rem;
}

.info-block .debtor-name {
    font-weight: 700;
}

.info-block .court-date-highlight {
    font-weight: 700;
    color: #8b5cf6;
}

.info-block .status-highlight {
    font-weight: 700;
    color: #8b5cf6;
}

.info-block .contact-link {
    color: var(--primary-color);
}

.court-timeline h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.mini-timeline {
    display: flex;
    gap: 0;
    position: relative;
}

.mini-timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--border-color);
}

.timeline-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.timeline-step .step-dot {
    width: 20px;
    height: 20px;
    border-radius: 0;
    background: var(--border-color);
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--border-color);
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.timeline-step.completed .step-dot {
    background: #10b981;
    box-shadow: 0 0 0 2px #10b981;
}

.timeline-step.current .step-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 2px #f59e0b;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 2px #f59e0b; }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.3); }
}

.step-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.step-date {
    font-size: 0.75rem;
    color: var(--text-light);
}

.step-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
}

.enforcement-details {
    background: var(--background-light);
    padding: 1.25rem;
    border-radius: 0;
    margin-top: 1rem;
}

.enforcement-details h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.enforcement-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.enforcement-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--white);
    border-radius: 0;
}

.enforcement-item .item-icon {
    font-size: 1.5rem;
}

.enforcement-item .item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.enforcement-item .item-name {
    font-weight: 600;
    color: var(--text-dark);
}

.enforcement-item .item-value {
    font-size: 0.875rem;
    color: var(--text-light);
}

.enforcement-item .item-status {
    font-size: 0.875rem;
    color: #f59e0b;
    font-weight: 600;
}

.enforcement-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--white);
    border-radius: 0;
}

.enforcement-summary .coverage-good {
    color: #10b981;
    font-size: 1.25rem;
}

.court-case-actions {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--background-light);
    border-top: 1px solid var(--border-color);
}

.court-recovery-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.recovery-stat-large {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-radius: 0;
}

.recovery-stat-large .recovery-amount {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #8b5cf6;
    margin-bottom: 0.25rem;
}

.recovery-stat-large .recovery-label {
    font-size: 0.95rem;
    color: var(--text-light);
}

.recovery-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recovery-breakdown .breakdown-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--background-light);
    border-radius: 0;
}

.recovery-breakdown .breakdown-label {
    color: var(--text-light);
}

.recovery-breakdown .breakdown-value {
    font-weight: 700;
    color: var(--text-dark);
}

/* ========================================
   PAYMENT PLANS / AFBETALINGER
   ======================================== */

.payment-forecast-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.forecast-chart {
    height: 300px;
}

.forecast-summary h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.forecast-months {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.forecast-month {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--background-light);
    border-radius: 0;
    transition: all 0.3s;
}

.forecast-month:hover {
    background: var(--white);
    box-shadow: var(--shadow);
}

.forecast-month.current {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-left: 3px solid #10b981;
}

.forecast-month .month-name {
    font-weight: 600;
    color: var(--text-dark);
    flex: 1;
}

.forecast-month .month-amount {
    font-weight: 700;
    color: var(--text-dark);
}

.forecast-month .month-payments {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-left: 0.5rem;
}

.forecast-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-radius: 0;
}

.forecast-total strong {
    font-size: 1.25rem;
    color: var(--primary-color);
}

/* Payment Plans Table */
.payment-plans-table-wrapper {
    overflow-x: auto;
}

.payment-plans-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.payment-plans-table thead {
    background: var(--background-light);
}

.payment-plans-table th {
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.payment-plans-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
}

.payment-plans-table tbody tr:hover {
    background: var(--background-light);
}

.payment-plans-table tbody tr.overdue {
    background: rgba(239, 68, 68, 0.03);
}

.payment-plans-table td {
    padding: 1rem 0.75rem;
}

.amount-paid {
    color: #10b981;
    font-weight: 600;
}

.amount-remaining {
    color: var(--text-dark);
    font-weight: 700;
}

.next-payment {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.next-payment .payment-date {
    font-weight: 600;
    color: var(--text-dark);
}

.next-payment .payment-countdown {
    font-size: 0.8rem;
    color: var(--text-light);
}

.next-payment .payment-countdown.overdue {
    color: #ef4444;
    font-weight: 600;
}

.end-date {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.end-date .date-value {
    font-weight: 600;
    color: var(--text-dark);
}

.end-date .date-remaining {
    font-size: 0.8rem;
    color: var(--text-light);
}

.plan-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 600;
}

.plan-status.on-track {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.plan-status.overdue {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Completion Timeline */
.completion-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.completion-month {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    align-items: center;
    gap: 1rem;
}

.completion-month .month-label {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.completion-bar {
    height: 32px;
    background: linear-gradient(135deg, #1a3a5c 0%, #0f2744 100%);
    border-radius: 0;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    min-width: 80px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.completion-bar:hover {
    background: linear-gradient(135deg, #2a4a6c 0%, #1a3a5c 100%);
    transform: scaleX(1.02);
    transform-origin: left;
    box-shadow: 0 4px 12px rgba(15, 39, 68, 0.3);
}

.completion-bar .completion-count {
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.completion-month .completion-amount {
    font-weight: 600;
    color: var(--text-dark);
    text-align: right;
}

/* Completion Month Interactive State */
.completion-month {
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.completion-month:hover {
    background-color: rgba(15, 39, 68, 0.08);
}

.completion-month.active {
    background-color: rgba(15, 39, 68, 0.12);
    box-shadow: inset 0 0 0 2px #1a3a5c;
}

.completion-month.active .month-label {
    color: #0f2744;
    font-weight: 700;
}

.completion-month.active .completion-bar {
    background: linear-gradient(135deg, #0f2744 0%, #1a3a5c 100%);
    box-shadow: 0 4px 12px rgba(15, 39, 68, 0.4);
}

.completion-month.active .completion-amount {
    color: #0f2744;
    font-weight: 700;
}

/* End Month Filter Notification */
.end-month-filter-notification {
    background: linear-gradient(135deg, rgba(15, 39, 68, 0.1) 0%, rgba(15, 39, 68, 0.05) 100%);
    border: 1px solid #1a3a5c;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    animation: slideDown 0.3s ease-out;
}

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

.filter-notification-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-dark);
}

.filter-notification-content i:first-child {
    color: #0f2744;
    font-size: 1rem;
}

.filter-notification-content span {
    flex: 1;
    font-size: 0.9rem;
}

.filter-notification-content strong {
    color: #0f2744;
}

.filter-notification-content button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.filter-notification-content button:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--text-dark);
}

/* Compliance Summary */
.compliance-summary {
    display: flex;
    justify-content: space-around;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-color);
    margin-top: 1.5rem;
}

.compliance-stat {
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.compliance-stat:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.compliance-stat.active {
    background-color: rgba(15, 39, 68, 0.1);
    box-shadow: inset 0 0 0 2px #1a3a5c;
}

.compliance-stat .stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

/* Professional softer colors with elegant tones (Bank style) */
.compliance-stat .stat-value.success {
    color: #4a9d7c;
}

.compliance-stat .stat-value.warning {
    color: #d4a84b;
}

.compliance-stat .stat-value.danger {
    color: #c75b5b;
}

.compliance-stat .stat-label {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Compliance Chart Container - subtle shadow for depth */
.compliance-card .chart-wrapper {
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(248,250,252,0.8));
    border-radius: 8px;
    padding: 1rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04),
                0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Outcome Summary */
.outcome-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border-color);
    margin-top: 1rem;
}

.outcome-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.outcome-label {
    color: var(--text-light);
}

.outcome-value {
    font-weight: 700;
}

.outcome-value.success {
    color: #10b981;
}

.outcome-value.warning {
    color: #f59e0b;
}

.outcome-value.danger {
    color: #ef4444;
}

/* ========================================
   CREATE NEW CASE FORM
   ======================================== */

.integration-notice {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0.02) 100%);
    border: 2px solid rgba(37, 99, 235, 0.2);
    border-radius: 0;
    margin-bottom: 2rem;
}

.notice-icon {
    font-size: 2.5rem;
}

.notice-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.notice-content p {
    color: var(--text-light);
    font-size: 0.95rem;
}

.notice-content a {
    color: var(--primary-color);
    font-weight: 600;
}

.integration-logos {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

.integration-badge {
    padding: 0.5rem 1rem;
    border-radius: 0;
    font-weight: 700;
    font-size: 0.875rem;
}

.integration-badge.dinero {
    background: #1a1a2e;
    color: #00d4ff;
}

.integration-badge.economics {
    background: #003399;
    color: white;
}

.create-case-form {
    background: var(--white);
    border-radius: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 0;
    border: 1px solid #e2e8f0;
}

/* Form Progress - Milestone Style (like case-details) */
.case-form-progress {
    padding: 2rem 3rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}

.progress-bar-container {
    position: absolute;
    top: 50%;
    left: 3rem;
    right: 3rem;
    height: 4px;
    transform: translateY(-50%);
    margin-top: -12px;
}

.progress-bar-track {
    position: absolute;
    inset: 0;
    background: #e2e8f0;
    border-radius: 2px;
}

.progress-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, #059669, var(--primary-color));
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-milestones {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.form-milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.form-milestone .milestone-dot {
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: var(--border-color);
    border: 2px solid var(--white);
    box-shadow: 0 0 0 1px var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-milestone.completed .milestone-dot {
    background: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.form-milestone.active .milestone-dot {
    background: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
    position: relative;
}

/* Pulse animation for active milestone */
.form-milestone.active .milestone-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    transform: translate(-50%, -50%);
    animation: formMilestonePulse 2s ease-in-out infinite;
    z-index: -1;
    opacity: 0;
}

@keyframes formMilestonePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.form-milestone .milestone-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.form-milestone.completed .milestone-label {
    color: #059669;
}

.form-milestone.active .milestone-label {
    color: var(--primary-color);
    font-weight: 700;
}

.form-milestone .milestone-sublabel {
    font-size: 0.65rem;
    color: var(--text-light);
    font-weight: 400;
    transition: all 0.3s;
    white-space: nowrap;
}

.form-milestone.completed .milestone-sublabel {
    color: var(--primary-color);
}

.form-milestone.active .milestone-sublabel {
    color: var(--text-dark);
    font-weight: 500;
}

.step-item.completed .step-label {
    color: #059669;
}

.step-connector {
    flex: 1;
    height: 3px;
    background: #e2e8f0;
    margin: 0 0.75rem;
    margin-bottom: 2rem;
    max-width: 80px;
    position: relative;
    border-radius: 2px;
}

.step-item.completed + .step-connector,
.step-connector:has(+ .step-item.active),
.step-connector:has(+ .step-item.completed) {
    background: linear-gradient(90deg, #059669, var(--primary-color));
}

/* Form Sections */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: fadeInUp 0.4s ease-out;
}

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

.form-section {
    padding: 2.5rem;
    margin-bottom: 0;
}

.form-section h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-section h2 i {
    color: var(--primary-color);
    font-size: 1.2rem;
    background: #eff6ff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.section-description {
    color: #64748b;
    margin-bottom: 2rem;
    padding-left: 52px;
    font-size: 0.95rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: end;
}

.form-row.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.9rem 1rem;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: #cbd5e1;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group input.error,
.form-group select.error {
    border-color: #ef4444;
    background: #fef2f2;
}

.form-group input::placeholder {
    color: #94a3b8;
}

.field-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.field-hint i {
    font-size: 0.9rem;
}

.input-with-currency {
    display: flex;
    border: 2px solid var(--border-color);
    border-radius: 0;
    overflow: hidden;
    transition: border-color 0.3s;
}

.input-with-currency:focus-within {
    border-color: var(--primary-color);
}

.input-with-currency input {
    flex: 1;
    border: none !important;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    min-width: 0;
}

.input-with-currency input:focus {
    outline: none;
}

.currency-select {
    border: none !important;
    border-left: 2px solid var(--border-color) !important;
    background: var(--background-light);
    padding: 0.875rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    min-width: 70px;
}

.currency-select:focus {
    outline: none;
    background: var(--white);
}

.input-with-action {
    display: flex;
    gap: 0.75rem;
}

.input-with-action input {
    flex: 1;
}

.btn-inline {
    padding: 0.875rem 1.25rem;
    background: var(--background-light);
    border: 2px solid var(--border-color);
    border-radius: 0;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s;
}

.btn-inline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Autocomplete Dropdown */
.autocomplete-wrapper {
    position: relative;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: var(--shadow-lg);
}

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

.autocomplete-item {
    padding: 0.875rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background: var(--background-light);
}

.autocomplete-item-name {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.autocomplete-item-details {
    font-size: 0.85rem;
    color: var(--text-light);
}

.autocomplete-item-details span {
    margin-right: 1rem;
}

.autocomplete-loading {
    padding: 1rem;
    text-align: center;
    color: var(--text-light);
}

.autocomplete-loading i {
    margin-right: 0.5rem;
}

.autocomplete-no-results {
    padding: 1rem;
    text-align: center;
    color: var(--text-light);
    font-style: italic;
}

.form-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 2rem 0;
}

.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
}

.form-divider span {
    padding: 0 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Total Calculation Box - Professional Bank Style */
.total-calculation-box {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.calc-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    color: #94a3b8;
    font-size: 0.95rem;
}

.calc-row span:last-child {
    font-family: 'Roboto Mono', monospace;
    color: #e2e8f0;
}

.calc-row.total {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.3rem;
    padding-top: 0.75rem;
}

.calc-row.total span:last-child {
    color: #4ade80;
    font-weight: 700;
}

.calc-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #475569, transparent);
    margin: 0.75rem 0;
}

.calc-row.calc-row-highlight {
    color: #60a5fa;
}

.calc-row.calc-row-highlight span:last-child {
    color: #93c5fd;
}

/* Confirmation Checkbox Cards */
.confirmation-checkbox-card {
    margin-top: 1.5rem;
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.confirmation-checkbox-card.required {
    background: linear-gradient(135deg, #fef9e7 0%, #fef3c7 100%);
    border: 1px solid #f0c36d;
}

.confirmation-checkbox-card.optional {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    margin-top: 1rem;
}

.confirmation-checkbox-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.confirmation-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    margin: 0;
}

.confirmation-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.confirmation-checkbox-label .checkbox-custom {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid #94a3b8;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.confirmation-checkbox-card.required .checkbox-custom {
    border-color: #d97706;
}

.confirmation-checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: #1e3a5f;
    border-color: #1e3a5f;
}

.confirmation-checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    font-size: 12px;
}

.confirmation-checkbox-label .checkbox-content {
    flex: 1;
}

.confirmation-checkbox-label .checkbox-title {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: #334155;
    margin-bottom: 0.35rem;
}

.confirmation-checkbox-card.required .checkbox-title {
    color: #92400e;
}

.confirmation-checkbox-card.required .checkbox-title i {
    color: #d97706;
    margin-right: 0.35rem;
}

.confirmation-checkbox-label .checkbox-description {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

/* Upload Zone */
.upload-zone {
    border: 3px dashed var(--border-color);
    border-radius: 0;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 1.5rem;
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.02);
}

.upload-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.upload-zone h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.upload-zone p {
    color: var(--text-light);
    font-size: 0.95rem;
}

.uploaded-files {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.uploaded-file-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 0;
}

.uploaded-file-item .file-icon {
    font-size: 1.5rem;
}

.uploaded-file-item .file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.uploaded-file-item .file-name {
    font-weight: 600;
    color: var(--text-dark);
}

.uploaded-file-item .file-size {
    font-size: 0.875rem;
    color: var(--text-light);
}

.btn-remove {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: transform 0.2s;
}

.btn-remove:hover {
    transform: scale(1.2);
}

/* Document Suggestions */
.document-suggestions h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 0;
}

.suggestion-icon {
    font-size: 1.5rem;
}

.suggestion-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.suggestion-text strong {
    color: var(--text-dark);
}

.suggestion-text span {
    font-size: 0.875rem;
    color: var(--text-light);
}

.suggestion-status {
    padding: 0.375rem 0.75rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.suggestion-status.required {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.suggestion-status.optional {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Summary Cards */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card {
    background: var(--background-light);
    border-radius: 0;
    padding: 1.5rem;
    position: relative;
}

.summary-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.summary-content p {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: 0.95rem;
}

.summary-content p strong {
    color: var(--text-light);
    font-weight: 500;
}

.summary-content p span {
    color: var(--text-dark);
    font-weight: 600;
}

.summary-total {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 2px solid var(--border-color);
    display: flex;
    justify-content: space-between;
}

.summary-total strong {
    color: var(--text-dark) !important;
}

.summary-total span {
    color: var(--primary-color) !important;
    font-size: 1.1rem;
}

.btn-edit {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 0.875rem;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-edit:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.doc-summary-list {
    list-style: none;
    padding: 0;
    margin-top: 0.5rem;
}

.doc-summary-list li {
    padding: 0.375rem 0;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.doc-summary-list li::before {
    content: '📄 ';
}

/* Terms Acceptance */
.terms-acceptance {
    margin-bottom: 2rem;
}

.terms-acceptance .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    padding: 1.5rem;
    background: var(--background-light);
    border-radius: 0;
    border: 2px solid var(--border-color);
    transition: all 0.3s;
}

.terms-acceptance .checkbox-label:hover {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.02);
}

.terms-acceptance .checkbox-label:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
}

.terms-acceptance .checkbox-label input[type="checkbox"] {
    display: block !important;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-top: 0.125rem;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--primary-color);
    appearance: auto;
    -webkit-appearance: checkbox;
}

.terms-acceptance .checkbox-label .checkmark {
    display: none;
}

.terms-acceptance .checkbox-label span:last-child {
    color: var(--text-dark);
    line-height: 1.6;
    flex: 1;
}

.terms-acceptance .checkbox-label a {
    color: var(--primary-color);
    text-decoration: underline;
}

.terms-acceptance .checkbox-label a:hover {
    color: var(--primary-dark);
}

/* Processing Info */
.processing-info {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0.02) 100%);
    border-radius: 0;
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.processing-info .info-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.processing-info .info-text strong {
    display: block;
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.processing-info .info-text p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Form Navigation - Professional Style */
.form-navigation {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 2.5rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid #e2e8f0;
    margin-top: 0;
}

.form-navigation .btn-primary,
.form-navigation .btn-secondary {
    padding: 0.85rem 1.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.form-navigation .btn-primary {
    background: var(--primary-color);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.form-navigation .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.form-navigation .btn-secondary {
    background: transparent;
    color: var(--text-dark);
    border: 2px solid var(--border-color);
}

.form-navigation .btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-large {
    padding: 1rem 2.5rem !important;
    font-size: 1rem !important;
}

/* Secondary Button Small */
.btn-secondary-small {
    padding: 0.5rem 1rem;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 0;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-secondary-small:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Cancel Request Button - matches secondary style */
.btn-cancel-request {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-request:hover {
    background: var(--gray-50);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-cancel-request:active {
    background: var(--gray-100);
    transform: scale(0.98);
}

.btn-cancel-request i {
    font-size: 0.8rem;
}

/* ========================================
   CASE DETAILS ADDITIONAL STYLES
   ======================================== */

.case-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.case-header-left h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.case-meta-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.case-date,
.case-handler {
    color: var(--text-light);
    font-size: 0.95rem;
}

.case-header-actions {
    display: flex;
    gap: 1rem;
}

/* Danger Button */
.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-danger:disabled {
    background: #fca5a5;
    cursor: not-allowed;
}

/* Case Metrics Grid */
.case-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.75rem;
    background: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    transition: all 0.2s;
}

.metric-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-top-color: var(--accent-color);
}

.metric-card.success {
    background: var(--white);
    border-top-color: var(--status-success);
}

.metric-card.success:hover {
    border-top-color: #1e5a3f;
}

.metric-card.warning {
    background: var(--white);
    border-top-color: var(--status-warning);
}

.metric-card.warning:hover {
    border-top-color: #8b6508;
}

.metric-card.info {
    background: var(--white);
    border-top-color: var(--status-info);
}

.metric-card.info:hover {
    border-top-color: var(--primary-dark);
}

.metric-icon {
    font-size: 1.8rem;
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-info-bg);
    border-radius: 0;
    flex-shrink: 0;
}

.metric-card.success .metric-icon {
    color: var(--status-success);
    background: var(--status-success-bg);
}

.metric-card.warning .metric-icon {
    color: var(--status-warning);
    background: var(--status-warning-bg);
}

.metric-card.info .metric-icon {
    color: var(--status-info);
    background: var(--status-info-bg);
}

.metric-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.metric-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
}

.metric-progress {
    font-size: 0.875rem;
    color: var(--text-light);
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* Risk Assessment */
.debtor-risk-assessment {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 0;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--status-success);
    margin-top: 1.5rem;
}

.debtor-risk-assessment h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.risk-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.risk-indicator .risk-label {
    font-weight: 700;
    font-size: 1rem;
}

.risk-indicator.low .risk-label {
    color: var(--status-success);
}

.risk-bar {
    flex: 1;
    height: 10px;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 0;
    overflow: hidden;
}

.risk-fill {
    height: 100%;
    border-radius: 0;
    background: #10b981;
}

.risk-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.risk-details span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.risk-details i {
    color: var(--status-success);
    font-size: 0.85rem;
}

/* Amount Breakdown - Danish Bank Style */
.amount-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease;
}

.breakdown-item:last-child {
    border-bottom: none;
}

.breakdown-label {
    color: #5a6872;
    font-weight: 450;
    font-size: 0.9rem;
}

.breakdown-value {
    font-weight: 600;
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
}

.breakdown-divider {
    display: none;
}

/* Samlet beløb (Total) */
.breakdown-item.total {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 2px solid #e2e8f0;
    border-bottom: 2px solid #e2e8f0;
    padding: 1rem;
    margin-top: 0.25rem;
}

.breakdown-item.total .breakdown-label {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.95rem;
}

.breakdown-item.total .breakdown-value {
    color: var(--text-dark);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Betalt - Success state */
.breakdown-item.paid {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    padding: 0.75rem 1rem;
}

.breakdown-item.paid .breakdown-label {
    color: #166534;
    font-weight: 500;
}

.breakdown-item.paid .breakdown-value {
    color: #16a34a;
    font-weight: 700;
}

/* Udestående - Highlight */
.breakdown-item.outstanding {
    background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
    border-left: 4px solid #dc2626;
    padding: 1rem;
    margin-top: 0.25rem;
}

.breakdown-item.outstanding .breakdown-label {
    color: #991b1b;
    font-weight: 600;
    font-size: 0.95rem;
}

.breakdown-item.outstanding .breakdown-value {
    color: #dc2626;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Udbetaling til kreditor */
.breakdown-item.payout-section {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border-top: 2px solid #bfdbfe;
    border-bottom: 2px solid #bfdbfe;
    padding: 1rem;
    margin-top: 0.25rem;
}

.breakdown-item.payout-section .breakdown-label {
    color: #1e40af;
    font-weight: 500;
}

.breakdown-item.payout-section .breakdown-value.creditor-payout {
    color: var(--primary-color);
    font-size: 1.15rem;
    font-weight: 700;
}

/* Payment Plan Visual - baggrund altid synlig */
.payment-plan-visual {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.plan-progress-bar {
    height: 36px;
    background: #e8ecf1;
    border: 1px solid var(--border-color);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
    opacity: 0;
    transition: opacity 0.6s ease;
    transition-delay: 0.3s;
}

.payment-plan-visual.visible .plan-progress-bar {
    opacity: 1;
}

.plan-progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 1rem;
    min-width: 0;
    width: 0;
    transition: width 3s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: relative;
}

/* Subtle shine effect */
.plan-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), transparent);
    pointer-events: none;
}

.progress-text {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.plan-progress-fill.counted .progress-text {
    opacity: 1;
}

.plan-milestones {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 0 8px;
    opacity: 0;
    transition: opacity 0.8s ease;
    transition-delay: 0.5s;
}

.payment-plan-visual.visible .plan-milestones {
    opacity: 1;
}

/* Connection line between milestones - altid synlig */
.plan-milestones::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border-color);
    z-index: 0;
}

.milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 1;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.payment-plan-visual.visible .milestone {
    opacity: 1;
    transform: translateY(0);
}

.payment-plan-visual.visible .milestone:nth-child(1) {
    transition-delay: 1s;
}

.payment-plan-visual.visible .milestone:nth-child(2) {
    transition-delay: 1.4s;
}

.payment-plan-visual.visible .milestone:nth-child(3) {
    transition-delay: 1.8s;
}

.milestone-dot {
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: var(--border-color);
    border: 2px solid var(--white);
    box-shadow: 0 0 0 1px var(--border-color);
    transition: all 0.5s ease;
    transform: scale(0.8);
}

.payment-plan-visual.visible .milestone-dot {
    transform: scale(1);
}

.milestone.completed .milestone-dot {
    background: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.milestone.current .milestone-dot {
    background: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
    position: relative;
}

/* Subtle pulse for current milestone - starts after all animations complete */
.payment-plan-visual.visible .milestone.current .milestone-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    transform: translate(-50%, -50%);
    animation: milestoneIdlePulse 3s ease-in-out infinite;
    animation-delay: 3.5s;
    z-index: -1;
    opacity: 0;
}

@keyframes milestoneIdlePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.milestone-label {
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 500;
    transition: color 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

.payment-plan-visual.visible .milestone-label {
    opacity: 1;
}

.payment-plan-visual.visible .milestone:nth-child(1) .milestone-label {
    transition-delay: 1.2s;
}

.payment-plan-visual.visible .milestone:nth-child(2) .milestone-label {
    transition-delay: 1.6s;
}

.payment-plan-visual.visible .milestone:nth-child(3) .milestone-label {
    transition-delay: 2s;
}

.milestone.completed .milestone-label,
.milestone.current .milestone-label {
    color: var(--text-dark);
    font-weight: 600;
}

/* Schedule Table */
.payment-schedule-table {
    overflow-x: auto;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.schedule-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    color: var(--text-dark);
    border-bottom: 2px solid var(--border-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    background: var(--background-light);
    letter-spacing: 0.5px;
}

.schedule-table td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.schedule-table tbody tr {
    transition: all 0.2s;
}

.schedule-table tbody tr:hover {
    background: var(--background-light);
}

.schedule-table .completed-payment {
    background: var(--status-success-bg);
}

.schedule-table .completed-payment:hover {
    background: #d1f4e0;
}

.schedule-table .upcoming-payment.next {
    background: var(--status-warning-bg);
    border-left: 3px solid var(--status-warning);
}

.schedule-table .upcoming-payment.next:hover {
    background: #fdf2d9;
}

.payment-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.payment-status.paid {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.payment-status.upcoming {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.payment-status.pending {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Timeline Controls */
.timeline-controls {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.timeline-filter,
.timeline-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-filter label,
.timeline-sort label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.timeline-filter label i,
.timeline-sort label i {
    font-size: 0.8rem;
    color: var(--primary-color);
}

.timeline-filter select,
.timeline-sort select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    background: var(--white);
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.timeline-filter select:hover,
.timeline-sort select:hover {
    border-color: var(--primary-color);
}

.timeline-filter select:focus,
.timeline-sort select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Multi-Select Dropdown */
.multi-select-dropdown {
    position: relative;
    display: inline-block;
}

.multi-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--white);
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 150px;
    justify-content: space-between;
}

.multi-select-trigger:hover {
    border-color: var(--primary-color);
}

.multi-select-trigger i {
    font-size: 0.7rem;
    color: var(--text-light);
    transition: transform 0.2s ease;
}

.multi-select-dropdown.open .multi-select-trigger {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.multi-select-dropdown.open .multi-select-trigger i {
    transform: rotate(180deg);
}

.multi-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

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

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 0.85rem;
    color: var(--text-dark);
}

.multi-select-option:first-child {
    border-radius: 8px 8px 0 0;
}

.multi-select-option:last-child {
    border-radius: 0 0 8px 8px;
}

.multi-select-option:hover {
    background: var(--gray-50);
}

.multi-select-option input[type="checkbox"] {
    display: none;
}

.multi-select-option .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.multi-select-option .checkmark::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.65rem;
    color: white;
    opacity: 0;
    transform: scale(0);
    transition: all 0.15s ease;
}

.multi-select-option input[type="checkbox"]:checked + .checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.multi-select-option input[type="checkbox"]:checked + .checkmark::after {
    opacity: 1;
    transform: scale(1);
}

.multi-select-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.25rem 0;
}

/* Timeline Empty State */
.case-timeline.empty {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-empty-state {
    text-align: center;
    color: var(--text-light);
    padding: 2rem;
}

.timeline-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.timeline-empty-state p {
    font-size: 0.95rem;
}

/* Case Timeline */
.case-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Custom scrollbar for case timeline */
.case-timeline::-webkit-scrollbar {
    width: 6px;
}

.case-timeline::-webkit-scrollbar-track {
    background: var(--background-light);
    border-radius: 3px;
}

.case-timeline::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.case-timeline::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

.case-timeline .timeline-item {
    display: grid;
    grid-template-columns: 90px 40px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.case-timeline .timeline-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-left-color: var(--primary-color);
}

.case-timeline .timeline-item.success,
.case-timeline .timeline-item:has(.timeline-icon.success) {
    border-left-color: var(--status-success);
}

.case-timeline .timeline-item.success:hover,
.case-timeline .timeline-item:has(.timeline-icon.success):hover {
    border-left-color: var(--status-success);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.case-timeline .timeline-item.warning,
.case-timeline .timeline-item:has(.timeline-icon.warning) {
    border-left-color: #f59e0b;
}

.case-timeline .timeline-item.warning:hover,
.case-timeline .timeline-item:has(.timeline-icon.warning):hover {
    border-left-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.case-timeline .timeline-item.danger,
.case-timeline .timeline-item:has(.timeline-icon.danger) {
    border-left-color: #ef4444;
}

.case-timeline .timeline-item.danger:hover,
.case-timeline .timeline-item:has(.timeline-icon.danger):hover {
    border-left-color: #ef4444;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.case-timeline .timeline-item.court,
.case-timeline .timeline-item:has(.timeline-icon.court) {
    border-left-color: #7c3aed;
}

.case-timeline .timeline-item.court:hover,
.case-timeline .timeline-item:has(.timeline-icon.court):hover {
    border-left-color: #7c3aed;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.case-timeline .timeline-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    text-align: right;
    padding-top: 0.25rem;
}

.case-timeline .timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--status-info-bg);
    color: var(--primary-color);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-timeline .timeline-item:hover .timeline-icon {
    transform: scale(1.05);
}

.case-timeline .timeline-icon.success {
    background: var(--status-success-bg);
    color: var(--status-success);
}

.case-timeline .timeline-icon.info {
    background: var(--status-info-bg);
    color: var(--status-info);
}

.case-timeline .timeline-icon.new {
    background: var(--status-neutral-bg);
    color: var(--primary-color);
}

.case-timeline .timeline-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.case-timeline .timeline-icon.danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.case-timeline .timeline-icon.court {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.case-timeline .timeline-content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.case-timeline .timeline-content p {
    color: var(--text-light);
    font-size: 0.875rem;
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

.case-timeline .timeline-meta {
    font-size: 0.75rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.case-timeline .timeline-meta i {
    font-size: 0.7rem;
}

/* Document List Detailed */
.document-list-detailed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.document-item-detailed {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    border-radius: 0;
    transition: all 0.2s;
}

.document-item-detailed:hover {
    box-shadow: var(--shadow);
    transform: translateX(3px);
    border-left-color: var(--accent-color);
}

.doc-icon-large {
    font-size: 1.8rem;
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-info-bg);
    border-radius: 0;
    flex-shrink: 0;
}

.doc-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.doc-details .doc-name {
    font-weight: 600;
    color: var(--text-dark);
}

.doc-details .doc-meta {
    font-size: 0.8rem;
    color: var(--text-light);
}

.btn-download {
    padding: 0.5rem 1rem;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 0;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-download:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Communication Log */
.communication-log {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.comm-item {
    padding: 1.25rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0;
    border-left: 3px solid var(--border-color);
    transition: all 0.2s;
}

.comm-item:hover {
    box-shadow: var(--shadow);
    transform: translateX(3px);
}

.comm-item.outbound {
    border-left-color: var(--primary-color);
}

.comm-item.outbound:hover {
    border-left-color: var(--accent-color);
}

.comm-item.inbound {
    border-left-color: var(--status-success);
}

.comm-item.inbound:hover {
    border-left-color: #1e5a3f;
}

.comm-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.comm-type {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.comm-date {
    font-size: 0.8rem;
    color: var(--text-light);
}

.comm-content {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* Formateret email-visning */
.email-formatted {
    color: var(--text-light);
    font-size: 0.95rem;
}

.email-formatted .email-subject {
    color: var(--text-dark);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.email-formatted .email-body {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.9rem;
}

/* Fremhævet besked (når man klikker fra tidslinjen) */
.comm-item.highlighted {
    animation: highlightMessage 3s ease-out;
    border-left-color: var(--accent-color) !important;
    background: linear-gradient(90deg, rgba(0, 163, 255, 0.08) 0%, transparent 100%);
    box-shadow: 0 0 0 2px rgba(0, 163, 255, 0.2), var(--shadow-lg);
    transform: translateX(5px);
}

@keyframes highlightMessage {
    0% {
        background: linear-gradient(90deg, rgba(0, 163, 255, 0.15) 0%, rgba(0, 163, 255, 0.05) 100%);
        box-shadow: 0 0 0 3px rgba(0, 163, 255, 0.3), var(--shadow-lg);
    }
    30% {
        background: linear-gradient(90deg, rgba(0, 163, 255, 0.12) 0%, rgba(0, 163, 255, 0.03) 100%);
    }
    100% {
        background: linear-gradient(90deg, rgba(0, 163, 255, 0.08) 0%, transparent 100%);
        box-shadow: 0 0 0 2px rgba(0, 163, 255, 0.2), var(--shadow-lg);
    }
}

/* Klikbar tidslinje-item for chat-beskeder */
.timeline-item.timeline-item-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeline-item.timeline-item-clickable:hover {
    transform: translateX(4px);
    background: linear-gradient(90deg, rgba(0, 163, 255, 0.05) 0%, transparent 100%);
}

.timeline-item.timeline-item-clickable:hover .timeline-content h4 {
    color: var(--primary-color);
}

.timeline-item.timeline-item-clickable:hover .timeline-link {
    color: var(--primary-color);
    opacity: 1;
}

.timeline-link {
    color: var(--text-light);
    font-size: 0.8rem;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.timeline-link i {
    font-size: 0.7rem;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .status-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .overview-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .payment-forecast-grid {
        grid-template-columns: 1fr;
    }
    
    .court-case-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .summary-cards {
        grid-template-columns: 1fr;
    }
    
    .case-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .status-overview-grid,
    .overview-stats-grid {
        grid-template-columns: 1fr;
    }

    .form-row,
    .form-row.three-cols {
        grid-template-columns: 1fr;
    }

    .form-steps {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .step-connector {
        display: none;
    }

    .page-header-enhanced {
        flex-direction: column;
        text-align: center;
    }

    .integration-notice {
        flex-direction: column;
        text-align: center;
    }

    .integration-logos {
        margin-left: 0;
        justify-content: center;
    }

    .case-alert {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .alert-details {
        flex-direction: column;
        gap: 0.5rem;
    }

    .alert-action {
        width: 100%;
        justify-content: center;
    }

    .case-detail-header {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .case-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .court-case-info-grid {
        grid-template-columns: 1fr;
    }
    
    .mini-timeline {
        flex-direction: column;
        gap: 1rem;
    }
    
    .mini-timeline::before {
        top: 0;
        bottom: 0;
        left: 10px;
        width: 2px;
        height: auto;
    }
    
    .timeline-step {
        flex-direction: row;
        text-align: left;
    }
    
    .step-content {
        margin-left: 1rem;
    }
    
    .completion-month {
        grid-template-columns: 80px 1fr;
        gap: 0.75rem;
    }
    
    .completion-month .completion-amount {
        display: none;
    }
}

/* ========================================
   SEARCH, FILTER & SORT FUNCTIONALITY
   ======================================== */

/* Table Controls */
.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-box .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: 0.5;
}

.search-box input {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 2.75rem;
    border: 2px solid var(--border-color);
    border-radius: 0;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-box input::placeholder {
    color: var(--text-light);
}

.search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--border-color);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.search-clear:hover {
    background: var(--text-light);
    color: var(--white);
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Filter Dropdown - Professional Banking Style */
.filter-dropdown {
    position: relative;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #f5f7f9;
    border: 1px solid #dde3e9;
    border-radius: 0;
    font-weight: 500;
    font-size: 0.8125rem;
    color: #1a2b3c;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-btn:hover {
    border-color: #0f2744;
    color: #0f2744;
}

.filter-btn i {
    font-size: 0.875rem;
    color: #5a6a7a;
}

.filter-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: #0f2744;
    color: #ffffff;
    border-radius: 0;
    font-size: 0.6875rem;
    font-weight: 600;
}

.filter-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 340px;
    background: #ffffff;
    border-radius: 0;
    border: 1px solid #dde3e9;
    box-shadow: 0 4px 16px rgba(15, 39, 68, 0.12);
    z-index: 100;
    padding: 0;
}

.filter-dropdown-content.show {
    display: block;
    animation: filterFadeIn 0.15s ease;
}

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

/* Filter Header */
.filter-dropdown-content::before {
    content: 'Filtrér sager';
    display: block;
    padding: 0.875rem 1.25rem;
    background: #0f2744;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
}

.filter-section {
    padding: 1rem 1.25rem;
    margin-bottom: 0;
    border-bottom: 1px solid #ebeef2;
}

.filter-section:last-of-type {
    margin-bottom: 0;
    border-bottom: none;
}

.filter-section > label {
    display: block;
    font-weight: 600;
    font-size: 0.6875rem;
    color: #5a6a7a;
    margin-bottom: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.375rem 0.5rem;
    border-radius: 0;
    transition: background 0.15s ease;
    font-size: 0.8125rem;
    color: #1a2b3c;
}

.filter-checkbox:hover {
    background: #f5f7f9;
}

.filter-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #0f2744;
}

.filter-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-range input {
    flex: 1;
    padding: 0.5rem 0.625rem;
    border: 1px solid #dde3e9;
    border-radius: 0;
    font-size: 0.8125rem;
    background: #f5f7f9;
}

.filter-range input:focus {
    outline: none;
    border-color: #0f2744;
    background: #ffffff;
}

.filter-range span {
    color: #8a9aaa;
    font-size: 0.8125rem;
}

.filter-actions {
    display: flex;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background: #f5f7f9;
    border-top: 1px solid #dde3e9;
}

.btn-filter-clear {
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid #dde3e9;
    color: #5a6a7a;
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-filter-clear:hover {
    border-color: #8b3a3a;
    color: #8b3a3a;
}

.btn-filter-apply {
    padding: 0.5rem 1rem;
    background: #0f2744;
    border: 1px solid #0f2744;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-filter-apply:hover {
    background: #1a3a5c;
}

.btn-filter-clear:hover {
    color: var(--text-dark);
}

.btn-filter-apply {
    padding: 0.625rem 1.25rem;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 0;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-filter-apply:hover {
    background: var(--primary-dark);
}

.quick-filter {
    min-width: 180px;
}

/* Active Filters Display */
.active-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 0;
    margin-bottom: 1.5rem;
}

.active-filters-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.filter-tag button {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
    margin-left: 0.25rem;
    transition: color 0.2s;
}

.filter-tag button:hover {
    color: #ef4444;
}

.btn-clear-all {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-clear-all:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* Sortable Headers */
.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.sortable:hover {
    background: rgba(37, 99, 235, 0.05);
}

.sortable.sorted {
    color: var(--primary-color);
}

.sort-icon {
    margin-left: 0.5rem;
    opacity: 0.4;
    font-size: 0.875rem;
}

.sortable:hover .sort-icon,
.sortable.sorted .sort-icon {
    opacity: 1;
}

/* ========================================
   ENHANCED MONTH CALENDAR (AFBETALINGER)
   ======================================== */

.year-month-selector {
    display: flex;
    gap: 0.75rem;
}

.year-select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--white);
    cursor: pointer;
    transition: all 0.3s;
    min-width: 100px;
}

.year-select:hover {
    border-color: var(--primary-color);
}

.year-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.payment-forecast-grid-enhanced {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
}

.forecast-chart-area {
    display: flex;
    flex-direction: column;
}

.forecast-chart {
    height: 300px;
}

.forecast-calendar h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.month-card {
    background: var(--background-light);
    border: 2px solid transparent;
    border-radius: 0;
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.3s;
}

.month-card:hover {
    background: var(--white);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.month-card.active {
    background: var(--white);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.month-name-short {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.875rem;
}

.month-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.month-badge.current {
    background: #10b981;
    color: white;
}

.month-amount-large {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.375rem;
}

.month-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-light);
}

.month-trend {
    font-weight: 600;
}

.month-trend.positive {
    color: var(--primary-color, #0f2744);
}

.month-trend.negative {
    color: #ef4444;
}

.year-totals {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-radius: 0;
    padding: 1rem 1.25rem;
}

.year-total-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.year-total-item:first-child {
    border-bottom: 1px solid rgba(37, 99, 235, 0.15);
    margin-bottom: 0.25rem;
}

.total-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

.total-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-color);
}

/* Month Detail Panel */
.month-detail-panel {
    display: none;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

.month-detail-panel.show {
    display: block;
    animation: slideDown 0.3s ease;
}

.month-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.month-detail-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.close-panel {
    width: 32px;
    height: 32px;
    background: var(--background-light);
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-light);
    transition: all 0.2s;
}

.close-panel:hover {
    background: var(--text-light);
    color: var(--white);
}

.month-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.detail-stat {
    text-align: center;
    padding: 1.5rem;
    background: var(--background-light);
    border-radius: 0;
}

.detail-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.detail-stat-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.month-detail-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.month-payments-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.month-payment-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s;
}

.month-payment-item:hover {
    background: var(--white);
    box-shadow: var(--shadow);
    transform: translateX(4px);
}

.payment-date-small {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.875rem;
    min-width: 60px;
}

.payment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.payment-debtor-name {
    font-weight: 600;
    color: var(--text-dark);
}

.payment-case-ref {
    font-size: 0.8rem;
    color: var(--text-light);
}

.payment-amount-small {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Responsive for new features */
@media (max-width: 1200px) {
    .payment-forecast-grid-enhanced {
        grid-template-columns: 1fr;
    }
    
    .month-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .table-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-box {
        max-width: none;
    }
    
    .filter-controls {
        flex-direction: column;
        width: 100%;
    }
    
    .filter-dropdown-content {
        left: 0;
        right: 0;
        min-width: auto;
    }
    
    .quick-filter {
        width: 100%;
    }
    
    .month-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .month-detail-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .month-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .month-card {
        padding: 0.75rem;
    }
    
    .month-amount-large {
        font-size: 0.9rem;
    }
}

/* ========================================
   DISPUTE RESPONSE PAGE STYLES
   ======================================== */

/* Dispute Response Header */
.dispute-response-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.dispute-header-left h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.back-navigation {
    margin-bottom: 1rem;
}

.back-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.back-link:hover {
    color: var(--primary-dark);
    transform: translateX(-4px);
}

.case-info-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.case-number-large {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.dispute-status-badge {
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
}

.dispute-status-badge.new {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

.deadline-badge {
    padding: 0.5rem 1rem;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
}

.dispute-header-actions {
    display: flex;
    gap: 0.75rem;
}

/* Main Grid Layout */
.dispute-response-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 2rem;
}

/* Info Column */
.dispute-info-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Info Cards */
.info-card {
    background: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.info-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--background-light);
    border-bottom: 1px solid var(--gray-200);
}

.info-card-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.dispute-date {
    font-size: 0.8rem;
    color: var(--text-light);
}

.info-card-content {
    padding: 1.25rem;
}

/* Debtor Profile */
.debtor-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--gray-200);
}

.debtor-avatar-large {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 1.25rem;
}

.debtor-details-large {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.debtor-company {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1rem;
}

.debtor-cvr {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Compact Info Grid */
.info-grid-compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.info-item-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label-small {
    font-size: 0.85rem;
    color: var(--text-light);
}

.info-value-small {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    text-align: right;
}

/* Claim Summary */
.claim-summary-compact {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.claim-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.claim-row span:first-child {
    color: var(--text-light);
}

.claim-row span:last-child {
    font-weight: 600;
    color: var(--text-dark);
}

.claim-row.total {
    padding-top: 0.75rem;
    font-size: 1rem;
}

.claim-row.total span:first-child {
    font-weight: 700;
    color: var(--text-dark);
}

.claim-row.total span:last-child {
    font-weight: 800;
    color: var(--primary-color);
    font-size: 1.125rem;
}

.claim-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 0.5rem 0;
}

.claim-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Dispute Card Highlight */
.dispute-card-highlight {
    border: 2px solid #f59e0b;
}

.dispute-card-highlight .info-card-header {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.dispute-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fef3c7;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

.type-icon {
    font-size: 1rem;
}

.type-text {
    font-weight: 600;
    color: #92400e;
    font-size: 0.9rem;
}

.dispute-original-message {
    background: var(--background-light);
    padding: 1rem;
    border-radius: 0;
    border-left: 3px solid #f59e0b;
    margin-bottom: 1rem;
}

.dispute-original-message p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-dark);
    font-style: italic;
    margin: 0;
}

.dispute-attachments h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.attachment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--background-light);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s;
}

.attachment-item:hover {
    background: var(--white);
    box-shadow: var(--shadow);
}

.attachment-icon {
    font-size: 1.5rem;
}

.attachment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.attachment-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

.attachment-meta {
    font-size: 0.75rem;
    color: var(--text-light);
}

.btn-view {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.btn-view:hover {
    opacity: 1;
}

/* Compact Timeline */
.timeline-compact {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-item-compact {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    position: relative;
}

.timeline-item-compact:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2rem;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.timeline-item-compact .timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 0;
    background: var(--gray-300);
    flex-shrink: 0;
    margin-top: 4px;
}

.timeline-item-compact.current .timeline-dot {
    background: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.timeline-content-compact {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.timeline-date-compact {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
}

.timeline-text-compact {
    font-size: 0.85rem;
    color: var(--text-dark);
}

/* Response Column */
.dispute-response-column {
    display: flex;
    flex-direction: column;
}

/* Response Tabs */
.response-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: var(--gray-100);
    padding: 0.375rem;
    border-radius: 0;
}

.response-tab {
    flex: 1;
    padding: 0.875rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.3s;
}

.response-tab:hover {
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.5);
}

.response-tab.active {
    background: var(--white);
    color: var(--primary-color);
    box-shadow: var(--shadow);
}

/* Response Tab Content */
.response-tab-content {
    display: none;
}

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

/* Response Form Card */
.response-form-card {
    background: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow);
    padding: 2rem;
}

.response-form-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.form-description {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* Response Form */
.response-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

/* Response Type Options */
.response-type-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.response-type-option {
    display: block;
    cursor: pointer;
}

.response-type-option input[type="radio"] {
    display: none;
}

.response-type-option .option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--background-light);
    border: 2px solid var(--gray-200);
    border-radius: 0;
    transition: all 0.3s;
}

.response-type-option:hover .option-content {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
}

.response-type-option.selected .option-content {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.1);
}

.option-icon {
    font-size: 2rem;
}

.option-title {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.option-desc {
    font-size: 0.75rem;
    color: var(--text-light);
    text-align: center;
}

/* Amount Adjustment */
.amount-adjustment {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.amount-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.amount-input-group input {
    width: 150px;
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.amount-input-group input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.amount-suffix {
    font-weight: 600;
    color: var(--text-light);
}

.amount-difference {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.diff-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

.diff-value {
    font-weight: 700;
    color: #10b981;
}

/* Message Templates */
.message-templates {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.templates-label {
    font-size: 0.85rem;
    color: var(--text-light);
}

.template-btn {
    padding: 0.375rem 0.75rem;
    background: var(--background-light);
    border: 1px solid var(--gray-200);
    border-radius: 100px;
    font-size: 0.8rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s;
}

.template-btn:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* Textarea */
.response-form textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
}

.response-form textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Upload Zone Compact */
.upload-zone-compact {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--background-light);
    border: 2px dashed var(--gray-300);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s;
}

.upload-zone-compact:hover,
.upload-zone-compact.drag-over {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
}

.upload-icon-small {
    font-size: 1.5rem;
}

.upload-zone-compact span {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Uploaded Files List */
.uploaded-files-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.uploaded-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0;
}

.file-icon {
    font-size: 1.25rem;
}

.file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.file-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

.file-size {
    font-size: 0.75rem;
    color: var(--text-light);
}

.btn-remove-file {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: #fee2e2;
    border: none;
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.3s;
}

.btn-remove-file:hover {
    background: #dc2626;
    color: var(--white);
}

/* Form Hint */
.form-hint {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 0.5rem;
}

/* Response Actions */
.response-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    margin-top: 0.5rem;
}

.btn-submit-response {
    padding: 0.875rem 2rem;
    font-size: 1rem;
}

/* Documents Section */
.documents-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.documents-section h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.upload-zone-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: var(--background-light);
    border: 2px dashed var(--gray-300);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.upload-zone-large:hover {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
}

.upload-icon-large {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.upload-zone-large h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.upload-zone-large p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.upload-hint {
    font-size: 0.8rem;
    color: var(--gray-400);
}

/* Document Category */
.document-category {
    margin-top: 1rem;
}

.document-category h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.document-list-detailed {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.document-item-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--background-light);
    border-radius: 0;
    transition: all 0.3s;
}

.document-item-row:hover {
    background: var(--white);
    box-shadow: var(--shadow);
}

.document-item-row.debtor-doc {
    background: #fef3c7;
}

.doc-icon {
    font-size: 1.5rem;
}

.doc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.doc-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}

.doc-meta {
    font-size: 0.75rem;
    color: var(--text-light);
}

.doc-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 0;

    border: 1px solid var(--gray-200);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.btn-icon:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.btn-icon.danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* Decision Options */
.decision-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.decision-card {
    border: 2px solid var(--gray-200);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
}

.decision-card:hover {
    border-color: var(--primary-color);
}

.decision-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.decision-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--background-light);
}

.decision-icon {
    width: 48px;
    height: 48px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.decision-icon.reject {
    background: #fee2e2;
}

.decision-icon.partial {
    background: #fef3c7;
}

.decision-icon.accept {
    background: #d1fae5;
}

.decision-title {
    flex: 1;
}

.decision-title h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.decision-title p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0;
}

.decision-header input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

.decision-form-section {
    padding: 1.25rem;
    border-top: 1px solid var(--gray-200);
    background: rgba(37, 99, 235, 0.02);
}

.partial-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.amount-input-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.amount-input-inline input {
    width: 120px;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--gray-200);
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
}

.amount-input-inline input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.decision-consequences {
    padding: 1.25rem;
    border-top: 1px solid var(--gray-200);
}

.decision-consequences h5 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.decision-consequences ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.decision-consequences li {
    font-size: 0.85rem;
    color: var(--text-light);
    padding-left: 1.25rem;
    position: relative;
}

.decision-consequences li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--gray-400);
}

/* Decision Confirmation */
.decision-confirmation {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 0;
    padding: 1.5rem;
}

.confirmation-warning {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.warning-icon {
    font-size: 1.5rem;
}

.warning-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.warning-content p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

.confirmation-checkbox {
    margin-bottom: 1.5rem;
}

.checkbox-label-large {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.checkbox-label-large input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    flex-shrink: 0;
    margin-top: 2px;
}

.decision-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.btn-finalize {
    padding: 0.875rem 2rem;
    font-size: 1rem;
}

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

/* Preview Modal */
.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: 1000;
    padding: 2rem;
}

.modal-content {
    background: var(--white);
    border-radius: 0;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-content.modal-large {
    max-width: 800px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-200);
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.modal-close {
    width: 36px;
    height: 36px;
    border-radius: 0;
    background: var(--background-light);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-light);
    transition: all 0.3s;
}

.modal-close:hover {
    background: #fee2e2;
    color: #dc2626;
}

.modal-body {
    padding: 2rem;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--gray-200);
}

/* Preview Letter */
.preview-letter {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 0;
    padding: 2rem;
}

.letter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--primary-color);
}

.letter-logo {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-color);
}

.letter-date {
    font-size: 0.9rem;
    color: var(--text-light);
}

.letter-recipient {
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.letter-subject {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.letter-body {
    margin-bottom: 2rem;
}

.letter-body p {
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.letter-signature {
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.letter-attachments {
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
    font-size: 0.85rem;
}

.letter-attachments ul {
    margin: 0.5rem 0 0 1.25rem;
}

.letter-attachments li {
    margin-bottom: 0.25rem;
}

/* Responsive for Dispute Response */
@media (max-width: 1200px) {
    .dispute-response-grid {
        grid-template-columns: 1fr;
    }
    
    .dispute-info-column {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .dispute-response-header {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .dispute-header-actions {
        width: 100%;
    }
    
    .dispute-header-actions button {
        flex: 1;
    }
    
    .case-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .dispute-info-column {
        grid-template-columns: 1fr;
    }
    
    .response-type-options {
        grid-template-columns: 1fr;
    }
    
    .response-actions {
        flex-direction: column;
    }
    
    .response-actions button {
        width: 100%;
    }
    
    .response-tabs {
        flex-direction: column;
    }
}

/* ===========================================
   PAYMENT MODALS & POPUPS
   =========================================== */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 40, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.modal-container {
    background: var(--white);
    width: 95%;
    max-width: 580px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(30px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.modal-overlay.active .modal-container {
    transform: translateY(0) scale(1);
}

/* Modal Header */
.modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--primary-color), #1a365d);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.modal-header h2 {
    color: var(--white);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h2 i {
    font-size: 1.5rem;
    opacity: 0.9;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 1.75rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    opacity: 0.7;
    transition: all 0.2s;
}

.modal-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* Modal Body */
.modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

/* Modal Footer */
.modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* ===========================================
   CASE SUCCESS MODAL
   =========================================== */

.success-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
}

.success-icon-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
}

.success-icon-ring {
    position: absolute;
    inset: 0;
    border: 3px solid #dbeafe;
    border-radius: 50%;
    animation: success-ring-pulse 2s ease-in-out infinite;
}

@keyframes success-ring-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

.success-icon-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: var(--primary-color);
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.success-case-badge {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}

.success-case-badge .case-badge-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.success-case-badge .case-badge-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Roboto Mono', monospace;
    letter-spacing: 1px;
}

.success-details {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.success-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.success-detail-row .detail-label {
    font-size: 0.9rem;
    color: #64748b;
}

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

.success-detail-row .detail-value.highlight {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.success-detail-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.5rem 0;
}

.success-info-box {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.success-info-box .info-box-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: #1d4ed8;
    font-weight: 600;
}

.success-info-box p {
    font-size: 0.9rem;
    color: #1e40af;
    margin: 0;
    line-height: 1.5;
}

.success-next-steps {
    text-align: left;
}

.success-next-steps h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.success-next-steps ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.success-next-steps li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: #334155;
}

.success-next-steps li i {
    color: var(--primary-color);
    font-size: 0.85rem;
}

.success-footer {
    justify-content: center !important;
}

/* ===========================================
   PAYMENT PLAN MODAL
   =========================================== */

/* Case Info in Modal */
.modal-case-info {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary-color);
}

.modal-case-info .case-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.modal-case-info .case-number-large {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.modal-case-info .case-amount-info {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-case-info .amount-label {
    font-size: 0.85rem;
    color: var(--text-light);
}

.modal-case-info .amount-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Slider Section */
.slider-section {
    margin-bottom: 2rem;
}

.slider-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.slider-section-title i {
    color: var(--primary-color);
}

/* Custom Range Slider - Professional Track Design */
.payment-slider-container {
    position: relative;
    padding: 3rem 0 2rem;
}

/* Floating Value Bubble */
.slider-value-bubble {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--white);
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    z-index: 10;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
    transition: left 0.1s ease-out;
}

.slider-value-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: calc(50% + var(--arrow-offset, 0px));
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--primary-color);
    transition: left 0.1s ease-out;
}

/* Track Background - Gray Line */
.slider-track {
    position: relative;
    height: 6px;
    background: #d1d5db;
    border-radius: 3px;
    margin: 0 10px;
}

/* Track Fill - Active portion */
.slider-track-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    transition: width 0.1s ease-out;
}

.payment-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: transparent;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
    margin: 0;
}

.payment-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: linear-gradient(to right, var(--primary-color) 0%, #d1d5db 0%);
    border-radius: 0;
}

.payment-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border: 3px solid var(--primary-color);
    border-radius: 0;
    cursor: grab;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease;
    margin-top: -9px;
}

.payment-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

.payment-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(0.95);
    background: var(--white);
    border-color: var(--primary-color);
}

.payment-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border: 3px solid var(--primary-color);
    border-radius: 0;
    cursor: grab;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease;
}

.payment-slider::-moz-range-thumb:active {
    cursor: grabbing;
    background: var(--white);
    border-color: var(--primary-color);
}

.payment-slider::-moz-range-track {
    height: 6px;
    background: #d1d5db;
    border-radius: 0;
}

/* Track Tick Marks */
.slider-track-markers {
    position: absolute;
    top: 3rem;
    left: 10px;
    right: 10px;
    height: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.slider-track-markers .marker {
    width: 2px;
    height: 12px;
    background: #9ca3af;
    border-radius: 1px;
    transition: background 0.2s;
}

.slider-track-markers .marker.active {
    background: var(--primary-color);
}

/* Extended Slider Labels */
.slider-labels-extended {
    position: relative;
    height: 25px;
    margin-top: 1rem;
}

.slider-labels-extended span {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-align: center;
    transition: transform 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.slider-labels-extended span::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 6px;
    background: var(--gray-300);
}

.slider-labels-extended span.secondary {
    color: var(--gray-300);
    font-weight: 400;
}

.slider-labels-extended span.hit {
    transform: translateX(-50%) scale(1.3);
    color: var(--primary-color);
    font-weight: 700;
}

.slider-labels-extended span.active {
    color: var(--primary-color);
}

/* Slider Labels - Legacy */
.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding: 0 0.25rem;
}

.slider-labels span {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Payment Plan Preview */
.plan-preview {
    background: var(--white);
    border: 2px solid var(--primary-color);
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.plan-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.plan-preview-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-preview-title i {
    color: var(--success-color);
}

.plan-number-display {
    background: var(--primary-color);
    color: var(--white);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Plan Grid */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.plan-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.plan-item-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
}

.plan-item-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.plan-item-value.highlight {
    color: var(--primary-color);
    font-size: 1.3rem;
}

/* Visual Timeline */
.visual-timeline {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.visual-timeline-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.timeline-visual {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--white);
    position: relative;
}

.timeline-dot::after {
    content: '';
    position: absolute;
    right: -8px;
    width: 8px;
    height: 2px;
    background: var(--gray-300);
}

.timeline-dot:last-child::after {
    display: none;
}

.timeline-dot.last {
    background: var(--success-color);
}

.timeline-dates {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: var(--text-light);
}

/* ===========================================
   PAYMENT OPTIONS MODAL
   =========================================== */

.payment-options-grid {
    display: grid;
    gap: 1rem;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--white);
    border: 2px solid var(--gray-200);
    cursor: pointer;
    transition: all 0.2s;
}

.payment-option:hover {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.02), rgba(30, 64, 175, 0.05));
}

.payment-option.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.05), rgba(30, 64, 175, 0.08));
}

.payment-option-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    font-size: 1.5rem;
    color: var(--text-light);
    transition: all 0.2s;
    flex-shrink: 0;
}

.payment-option:hover .payment-option-icon,
.payment-option.selected .payment-option-icon {
    background: var(--primary-color);
    color: var(--white);
}

.payment-option-content {
    flex: 1;
}

.payment-option-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.payment-option-desc {
    font-size: 0.85rem;
    color: var(--text-light);
}

.payment-option-check {
    width: 24px;
    height: 24px;
    border: 2px solid var(--gray-300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.payment-option.selected .payment-option-check {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

/* Payment Summary */
.payment-summary {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.payment-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.payment-summary-row:not(:last-child) {
    border-bottom: 1px solid var(--gray-200);
}

.payment-summary-row.total {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--primary-color);
    border-bottom: none;
}

.payment-summary-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

.payment-summary-row.total .payment-summary-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.payment-summary-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-dark);
}

.payment-summary-row.total .payment-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Card Payment Form */
.card-form {
    display: none;
    margin-top: 1.5rem;
    padding: 1.75rem;
    background: #f8fafc;
    border: 1px solid var(--gray-200);
}

.card-form.visible {
    display: block;
}

.card-form-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
}

.card-form-title i {
    color: var(--primary-color);
}

.form-row {
    margin-bottom: 1.25rem;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-row-split {
    display: flex;
    gap: 1.25rem;
}

.form-row-split .form-row {
    flex: 1;
    margin-bottom: 0;
}

.form-row-split .form-row:first-child {
    flex: 1.2;
}

.form-row-split .form-row:last-child {
    flex: 0.8;
    max-width: 120px;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-label i {
    font-size: 0.75rem;
    color: var(--text-light);
}

.form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--gray-300);
    font-size: 0.95rem;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    transition: all 0.2s ease;
    background: var(--white);
    color: var(--text-dark);
    box-sizing: border-box;
}

.form-input:hover {
    border-color: var(--gray-400);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.form-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Input Validation Error Styling */
.form-input.input-error {
    border-color: #dc2626;
    background-color: #fef2f2;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-input.input-error:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Shake Animation */
@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.form-input.input-shake {
    animation: inputShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Validation Error Message */
.validation-error-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-left: 3px solid #dc2626;
    color: #991b1b;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.2s ease-out;
}

.validation-error-message.visible {
    opacity: 1;
    transform: translateY(0);
}

.validation-error-message i {
    color: #dc2626;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Card Number Input Special Styling */
.form-input.card-number {
    font-family: 'Roboto Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 1.1rem;
    letter-spacing: 2px;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
}

/* CVV Input */
.form-input.cvv {
    text-align: center;
    font-family: 'Roboto Mono', 'SF Mono', 'Consolas', monospace;
    letter-spacing: 4px;
    font-size: 1rem;
}

/* Input with Icon */
.input-with-icon {
    position: relative;
    display: block;
}

.input-with-icon .form-input {
    padding-left: 2.75rem;
}

.input-with-icon .input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1rem;
    transition: color 0.2s;
    pointer-events: none;
}

.input-with-icon:focus-within .input-icon {
    color: var(--primary-color);
}

/* Card Type Badges */
.card-type-badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.card-type-badge {
    padding: 0.4rem 0.875rem;
    background: var(--white);
    border: 1px solid var(--gray-300);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    transition: all 0.2s;
}

.card-type-badge.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

/* Secure Badge */
.secure-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--success-color);
    margin-top: 1rem;
}

.secure-badge i {
    font-size: 1rem;
}

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

@media (max-width: 640px) {
    .modal-container {
        width: 100%;
        max-height: 100vh;
        margin: 0;
    }
    
    .modal-header {
        padding: 1.25rem 1.5rem;
    }
    
    .modal-body {
        padding: 1.5rem;
    }
    
    .modal-footer {
        padding: 1.25rem 1.5rem;
        flex-direction: column;
    }
    
    .modal-footer button {
        width: 100%;
    }
    
    .plan-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row-split {
        grid-template-columns: 1fr;
    }
    
    .payment-option {
        flex-direction: column;
        text-align: center;
    }
    
    .payment-option-check {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
    
    .payment-option {
        position: relative;
    }
}

/* ===========================================
   EDIT PAYMENT PLAN MODAL
   =========================================== */

.current-plan-info {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.current-plan-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.current-plan-header i {
    font-size: 1rem;
}

.current-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.current-plan-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.current-plan-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.current-plan-value {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.95rem;
}

.plan-comparison {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #e2e8f0;
}

.comparison-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.comparison-item.positive {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #047857;
}

.comparison-item.positive i {
    color: #10b981;
}

.comparison-item.negative {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #b91c1c;
}

.comparison-item.negative i {
    color: #ef4444;
}

.comparison-item.neutral {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #64748b;
}

.comparison-item.neutral i {
    color: #94a3b8;
}

.comparison-item i {
    font-size: 1.1rem;
}

@media (max-width: 640px) {
    .current-plan-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   FINANCE HERO SECTION - Professional Bank Style
   =========================================== */

.finance-hero-section {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--primary-light) 100%);
    position: relative;
    padding: 2.5rem 0;
    margin-bottom: 0;
    overflow: hidden;
}

.finance-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255,255,255,0.02) 2px,
            rgba(255,255,255,0.02) 4px
        );
    pointer-events: none;
}

.finance-hero-section::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 70%);
    pointer-events: none;
}

.finance-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.finance-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.finance-hero-left {
    flex: 1;
}

.finance-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.finance-breadcrumb a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.2s;
}

.finance-breadcrumb a:hover {
    color: white;
}

.breadcrumb-separator {
    color: rgba(255,255,255,0.4);
}

.breadcrumb-current {
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}

.finance-hero-title {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.finance-hero-title i {
    font-size: 1.75rem;
    opacity: 0.9;
}

.finance-hero-subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
    font-weight: 400;
}

.finance-hero-right {
    flex-shrink: 0;
}

.year-selector-modern {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 0;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.year-selector-modern label {
    color: rgba(255,255,255,0.8);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.year-selector-modern label i {
    font-size: 0.9rem;
}

.finance-select {
    background: white;
    border: 2px solid var(--border-color);
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-dark);
    border-radius: 0;
    cursor: pointer;
    min-width: 140px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a365d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    transition: all 0.3s;
}

.finance-select:hover {
    border-color: var(--primary-color);
}

.finance-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Finance Stats Dashboard */
.finance-stats-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: -3rem 0 2.5rem 0;
    position: relative;
    z-index: 10;
}

.finance-stat-card {
    background: white;
    border-radius: 0;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-bottom: 3px solid var(--primary-color);
    transition: all 0.3s ease;
    position: relative;
}

.finance-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.finance-stat-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.finance-stat-icon i {
    font-size: 1.5rem;
    color: white;
}

.finance-stat-icon.accent {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
}

.finance-stat-icon.success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.finance-stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.finance-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.finance-stat-label {
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.finance-stat-trend {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
}

.finance-stat-trend.positive {
    background: #ecfdf5;
    color: #059669;
}

.finance-stat-trend.negative {
    background: #fef2f2;
    color: #dc2626;
}

.finance-stat-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .finance-stats-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .finance-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .finance-hero-title {
        font-size: 1.5rem;
    }
    
    .finance-hero-right {
        width: 100%;
    }
    
    .year-selector-modern {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    
    .finance-stats-dashboard {
        grid-template-columns: 1fr;
        margin-top: -2rem;
    }
    
    .finance-stat-card {
        padding: 1.25rem;
    }
}

/* ===========================================
   REPORT MODAL - PROFESSIONAL STYLING
   =========================================== */

/* Report Modal Container */
.modal-report {
    max-width: 1100px;
    width: 95%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

.modal-report .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
}

/* Report Type Selector */
.report-type-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.report-type-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.report-type-option input[type="radio"] {
    display: none;
}

.report-type-option:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.report-type-option.active {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.report-type-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 12px;
    font-size: 1.25rem;
    color: #64748b;
    transition: all 0.2s ease;
}

.report-type-option.active .report-type-icon {
    background: #2563eb;
    color: #fff;
}

.report-type-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.report-type-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.report-type-desc {
    font-size: 0.75rem;
    color: #64748b;
}

.report-type-option.active .report-type-title {
    color: #1e40af;
}

/* Report Period Section */
.report-period-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
}

.report-period-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 1rem;
}

.report-period-section h4 i {
    color: #64748b;
}

.period-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.period-btn {
    padding: 0.6rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.period-btn:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.period-btn.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.custom-period-inputs {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.date-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.date-input-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
}

.date-input-group input {
    padding: 0.65rem 0.85rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.date-input-group input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Report Preview Section */
.report-preview-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.report-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.report-preview-header h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.preview-update-time {
    font-size: 0.75rem;
    color: #94a3b8;
}

.report-preview-content {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    background: #f1f5f9;
}

/* Report Document Styling */
.report-document {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.report-doc-header {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: #fff;
    padding: 1.75rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.report-logo h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.report-logo h2 span {
    color: #93c5fd;
}

.report-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.report-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.report-period-text {
    font-size: 0.95rem;
    opacity: 0.9;
}

.report-generated {
    font-size: 0.8rem;
    opacity: 0.75;
}

/* Report Company Info */
.report-company-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.company-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.company-details strong {
    font-size: 1rem;
    color: #1e293b;
}

.company-details span {
    font-size: 0.85rem;
    color: #64748b;
}

.report-period-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
}

.report-period-badge i {
    color: #2563eb;
}

/* Report Metrics Grid */
.report-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.report-metric {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

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

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

.metric-value.highlight {
    color: #059669;
}

.metric-change {
    font-size: 0.75rem;
    font-weight: 500;
}

.metric-change.positive {
    color: #059669;
}

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

.metric-sub {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Report Sections */
.report-section {
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.report-section:last-of-type {
    border-bottom: none;
}

.report-section h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1rem 0;
}

.report-section h5 i {
    color: #2563eb;
    font-size: 0.9rem;
}

/* Report Status Table */
.report-status-table {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.status-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1fr;
    padding: 0.75rem 1rem;
    align-items: center;
    font-size: 0.85rem;
    border-bottom: 1px solid #e2e8f0;
}

.status-row:last-child {
    border-bottom: none;
}

.status-row.header {
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-row.total {
    background: #f1f5f9;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.status-dot.active { background: #10b981; }
.status-dot.pending { background: #f59e0b; }
.status-dot.dispute { background: #ef4444; }
.status-dot.court { background: #8b5cf6; }
.status-dot.completed { background: #6b7280; }

/* Report Payment Summary */
.report-payment-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.payment-stat {
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: 10px;
}

.payment-stat .stat-num {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 0.35rem;
}

.payment-stat .stat-label {
    font-size: 0.75rem;
    color: #15803d;
    font-weight: 500;
}

/* Report Cases Table */
.report-cases-table {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.cases-row {
    display: grid;
    grid-template-columns: 1.2fr 2fr 1.2fr 1fr 1.5fr;
    padding: 0.75rem 1rem;
    align-items: center;
    font-size: 0.85rem;
    border-bottom: 1px solid #e2e8f0;
}

.cases-row:last-child {
    border-bottom: none;
}

.cases-row.header {
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-tag {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-tag.active {
    background: #dcfce7;
    color: #166534;
}

.status-tag.dispute {
    background: #fee2e2;
    color: #b91c1c;
}

.status-tag.court {
    background: #ede9fe;
    color: #5b21b6;
}

.status-tag.pending {
    background: #fef3c7;
    color: #92400e;
}

.status-tag.completed {
    background: #f3f4f6;
    color: #374151;
}

/* Report Document Footer */
.report-doc-footer {
    padding: 1.25rem 1.75rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.footer-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.footer-note i {
    color: #94a3b8;
    margin-top: 0.1rem;
}

.footer-contact {
    display: flex;
    gap: 2rem;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 500;
}

/* Modal Footer for Reports */
.modal-report .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.footer-left .api-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
    font-style: italic;
}

.footer-left .api-notice i {
    color: #94a3b8;
}

.footer-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-download-csv {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-download-csv:hover {
    background: #047857;
    transform: translateY(-1px);
}

.btn-download-csv i {
    font-size: 1rem;
}

/* Responsive Report Modal */
@media (max-width: 900px) {
    .report-type-selector {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .report-payment-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .status-row {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        font-size: 0.8rem;
    }

    .cases-row {
        grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr;
        font-size: 0.8rem;
    }
}

@media (max-width: 600px) {
    .modal-report {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .report-type-selector {
        grid-template-columns: 1fr;
    }

    .report-type-option {
        flex-direction: row;
        text-align: left;
        padding: 1rem;
    }

    .report-metrics-grid {
        grid-template-columns: 1fr;
    }

    .report-payment-summary {
        grid-template-columns: 1fr 1fr;
    }

    .report-doc-header {
        flex-direction: column;
        gap: 1rem;
    }

    .report-meta {
        text-align: left;
    }

    .report-company-info {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .status-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .status-row.header span:nth-child(3),
    .status-row.header span:nth-child(4),
    .status-row span:nth-child(3),
    .status-row span:nth-child(4) {
        display: none;
    }

    .cases-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .cases-row.header span:nth-child(3),
    .cases-row.header span:nth-child(4),
    .cases-row.header span:nth-child(5),
    .cases-row span:nth-child(3),
    .cases-row span:nth-child(4),
    .cases-row span:nth-child(5) {
        display: none;
    }

    .modal-report .modal-footer {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-actions {
        width: 100%;
        flex-direction: column;
    }

    .footer-actions button {
        width: 100%;
        justify-content: center;
    }

    .period-presets {
        flex-direction: column;
    }

    .period-btn {
        width: 100%;
    }

    .footer-contact {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ===========================================
   REPORT FILTERS SECTION
   =========================================== */

.report-filters-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    cursor: pointer;
    transition: background 0.2s ease;
}

.filters-header:hover {
    background: #f1f5f9;
}

.filters-header h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.filters-header h4 i {
    color: #64748b;
}

.filters-toggle {
    color: #94a3b8;
    transition: transform 0.3s ease;
}

.filters-toggle.open {
    transform: rotate(180deg);
}

.filters-content {
    padding: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-group > label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-label:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: #2563eb;
    border-color: #2563eb;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 10px;
    font-weight: bold;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator.active { background: #10b981; }
.status-indicator.pending { background: #f59e0b; }
.status-indicator.dispute { background: #ef4444; }
.status-indicator.court { background: #8b5cf6; }
.status-indicator.completed { background: #6b7280; }

.amount-range-inputs {
    display: flex;
    gap: 1rem;
}

.amount-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.amount-input input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    min-width: 60px;
}

.amount-input input:focus {
    outline: none;
}

.input-prefix, .input-suffix {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
}

.filters-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.btn-reset-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.btn-apply-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #2563eb;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

/* Loading State */
.report-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

.report-loading i {
    font-size: 2rem;
    color: #2563eb;
    animation: spin 1s linear infinite;
}

.report-loading span {
    font-size: 0.9rem;
    color: #64748b;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive Filters */
@media (max-width: 768px) {
    .filters-grid {
        grid-template-columns: 1fr;
    }

    .amount-range-inputs {
        flex-direction: column;
    }

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

    .filters-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   PROFESSIONAL BANKING STYLE - COMPANY DASHBOARD
   Inspired by Danske Bank, Nykredit, etc.
   ======================================== */

/* Company Dashboard Wrapper - Clean Banking Style */
.company-dashboard {
    background: #f5f7f9;
    min-height: calc(100vh - 80px);
}

.company-dashboard .welcome-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.company-dashboard .welcome-section h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #0f2744;
    letter-spacing: -0.02em;
}

.company-dashboard .welcome-section p {
    font-size: 0.95rem;
    color: #5a6a7a;
    font-weight: 400;
}

/* Professional Stat Cards - Bank Style with Color Accents */
.company-dashboard .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.company-dashboard .stats-grid.stats-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.company-dashboard .stats-grid.stats-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.company-dashboard .stat-card {
    background: #ffffff;
    border: 1px solid #dde3e9;
    border-left: 3px solid #5a6a7a;
    border-radius: 0;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.2s ease;
}

.company-dashboard .stat-card:hover {
    border-color: #c5cdd6;
    box-shadow: 0 2px 8px rgba(15, 39, 68, 0.06);
}

/* Primary Card - Dark Blue Accent (Total/Main KPI) */
.company-dashboard .stat-card.stat-primary {
    background: #0f2744;
    border-color: #0f2744;
    border-left-color: #0f2744;
}

.company-dashboard .stat-card.stat-primary .stat-label,
.company-dashboard .stat-card.stat-primary .stat-value,
.company-dashboard .stat-card.stat-primary .stat-change,
.company-dashboard .stat-card.stat-primary .stat-meta {
    color: #ffffff;
}

.company-dashboard .stat-card.stat-primary .stat-change.positive {
    color: #7dd3a8;
}

/* Secondary Card Variants with Color Accents (for non-linked cards only) */
.company-dashboard .stat-card:not(.stat-link):nth-child(2) {
    border-left-color: #1a3a5c;
}

.company-dashboard .stat-card:not(.stat-link):nth-child(2) .stat-icon {
    background: #e8f0f8;
}

.company-dashboard .stat-card:not(.stat-link):nth-child(2) .stat-icon i {
    color: #1a3a5c;
}

.company-dashboard .stat-card .stat-icon {
    width: 44px;
    height: 44px;
    background: #f5f7f9;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.company-dashboard .stat-card .stat-icon i {
    font-size: 1.125rem;
    color: #5a6a7a;
}

.company-dashboard .stat-card.stat-primary .stat-icon {
    background: rgba(255, 255, 255, 0.15);
}

.company-dashboard .stat-card.stat-primary .stat-icon i {
    color: #ffffff;
}

.company-dashboard .stat-card .stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.company-dashboard .stat-card .stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #5a6a7a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.company-dashboard .stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f2744;
    letter-spacing: -0.02em;
}

.company-dashboard .stat-card .stat-change,
.company-dashboard .stat-card .stat-meta {
    font-size: 0.75rem;
    color: #5a6a7a;
}

.company-dashboard .stat-card .stat-change.positive {
    color: #2d6a4f;
    font-weight: 500;
}

.company-dashboard .stat-card .stat-change.negative {
    color: #8b3a3a;
    font-weight: 500;
}

/* Stat Card Link Variants - Clickable KPI Cards */
.company-dashboard .stat-card.stat-link {
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

.company-dashboard .stat-card.stat-link:hover {
    border-color: #0f2744;
    box-shadow: 0 4px 12px rgba(15, 39, 68, 0.08);
}

.company-dashboard .stat-card.stat-dispute {
    border-left-color: #4a6a7a;
}

.company-dashboard .stat-card.stat-dispute .stat-icon {
    background: #eef2f5;
}

.company-dashboard .stat-card.stat-dispute .stat-icon i {
    color: #4a6a7a;
}

.company-dashboard .stat-card.stat-dispute:hover {
    border-left-color: #3a5a6a;
}

.company-dashboard .stat-card.stat-payment {
    border-left-color: #3a5a6a;
}

.company-dashboard .stat-card.stat-payment .stat-icon {
    background: #eef3f5;
}

.company-dashboard .stat-card.stat-payment .stat-icon i {
    color: #3a5a6a;
}

.company-dashboard .stat-card.stat-payment:hover {
    border-left-color: #2a4a5a;
}

.company-dashboard .stat-card .stat-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: #8a9aaa;
    transition: all 0.2s ease;
}

.company-dashboard .stat-card.stat-link:hover .stat-arrow {
    transform: translateY(-50%) translateX(3px);
    color: #0f2744;
}

/* Status Single Card Row */
.company-dashboard .status-overview-grid.status-single {
    grid-template-columns: 1fr;
    max-width: 400px;
}

/* Quick Actions Bar - Professional */
.company-dashboard .quick-actions-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #dde3e9;
}

.company-dashboard .quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #f5f7f9;
    border: 1px solid #dde3e9;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1a2b3c;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.company-dashboard .quick-action-btn:hover {
    background: #ebeef2;
    border-color: #0f2744;
    color: #0f2744;
}

.company-dashboard .quick-action-btn.primary {
    background: #0f2744;
    border-color: #0f2744;
    color: #ffffff;
}

.company-dashboard .quick-action-btn.primary:hover {
    background: #1a3a5c;
}

.company-dashboard .quick-action-btn .action-icon {
    font-size: 0.875rem;
    opacity: 0.7;
}

.company-dashboard .quick-action-btn .action-icon i {
    font-weight: 400;
}

/* Status Overview Grid - Bank Style */
.company-dashboard .status-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.company-dashboard .status-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #dde3e9;
    border-left: 3px solid;
    border-radius: 0;
    text-decoration: none;
    transition: all 0.15s ease;
}

.company-dashboard .status-card:hover {
    transform: none;
    box-shadow: none;
    border-color: #0f2744;
    border-left-width: 3px;
}

.company-dashboard .status-card.status-dispute {
    border-left-color: #8b3a3a;
}

.company-dashboard .status-card.status-court {
    border-left-color: #5a4a7a;
}

.company-dashboard .status-card.status-payment {
    border-left-color: #2d6a4f;
}

.company-dashboard .status-card-icon {
    width: 40px;
    height: 40px;
    background: #f5f7f9;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #5a6a7a;
}

.company-dashboard .status-card-icon i {
    font-weight: 400;
}

.company-dashboard .status-card-content {
    flex: 1;
}

.company-dashboard .status-card-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f2744;
}

.company-dashboard .status-card-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1a2b3c;
}

.company-dashboard .status-card-amount {
    font-size: 0.75rem;
    color: #5a6a7a;
}

.company-dashboard .status-card-arrow {
    font-size: 1rem;
    color: #8a9aaa;
    transition: transform 0.15s ease;
}

.company-dashboard .status-card:hover .status-card-arrow {
    transform: translateX(3px);
    color: #0f2744;
}

/* Dashboard Cards - Clean Professional */
.company-dashboard .dashboard-card {
    background: #ffffff;
    border: 1px solid #dde3e9;
    border-radius: 0;
    padding: 1.5rem;
    box-shadow: none;
    transition: border-color 0.15s ease;
}

.company-dashboard .dashboard-card:hover {
    box-shadow: none;
    border-color: #c5cdd6;
}

.company-dashboard .card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ebeef2;
}

.company-dashboard .card-icon {
    width: 36px;
    height: 36px;
    background: #f5f7f9;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    color: #5a6a7a;
    flex-shrink: 0;
}

.company-dashboard .card-icon i {
    font-weight: 400;
}

.company-dashboard .card-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #0f2744;
    margin-bottom: 0.125rem;
}

.company-dashboard .card-header p {
    font-size: 0.8125rem;
    color: #5a6a7a;
}

/* Card Header Actions - Bank Style */
.company-dashboard .card-header-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.company-dashboard .btn-header-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0f2744;
    background: #f5f7f9;
    border: 1px solid #dce1e8;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.company-dashboard .btn-header-action:hover {
    background: #ebeef2;
    border-color: #0f2744;
}

.company-dashboard .btn-header-action.primary {
    background: #0f2744;
    border-color: #0f2744;
    color: #ffffff;
}

.company-dashboard .btn-header-action.primary:hover {
    background: #1a3a5c;
    border-color: #1a3a5c;
}

.company-dashboard .btn-header-action i {
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .company-dashboard .card-header-actions {
        flex-direction: column;
        width: 100%;
        margin-top: 0.75rem;
        margin-left: 0;
    }

    .company-dashboard .card-header {
        flex-wrap: wrap;
    }

    .company-dashboard .btn-header-action {
        justify-content: center;
        width: 100%;
    }
}

/* Chart Legend - Professional */
.company-dashboard .chart-legend-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding-top: 1rem;
    border-top: 1px solid #ebeef2;
    margin-top: 1rem;
}

.company-dashboard .legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #5a6a7a;
}

.company-dashboard .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
}

/* Chart Summary - Banking Style */
.company-dashboard .chart-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ebeef2;
}

.company-dashboard .summary-stat .summary-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #5a6a7a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.company-dashboard .summary-stat .summary-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0f2744;
}

/* Trend Indicator - Subtle */
.company-dashboard .trend-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #e9f5ef;
    border-radius: 0;
    margin-top: 1rem;
    border-left: 3px solid #2d6a4f;
}

.company-dashboard .trend-indicator.positive {
    background: #e9f5ef;
    color: #2d6a4f;
    border-left-color: #2d6a4f;
}

.company-dashboard .trend-indicator .trend-arrow {
    font-size: 0.875rem;
    font-weight: 600;
}

.company-dashboard .trend-indicator .trend-text {
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Upcoming Payments - Professional */
.company-dashboard .upcoming-payments-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.company-dashboard .upcoming-payment-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: #f5f7f9;
    border-radius: 0;
    transition: background 0.15s ease;
}

.company-dashboard .upcoming-payment-item:hover {
    background: #ebeef2;
    box-shadow: none;
}

.company-dashboard .payment-date-box {
    width: 44px;
    height: 44px;
    background: #0f2744;
    color: #ffffff;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.company-dashboard .payment-day {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.company-dashboard .payment-month {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.company-dashboard .payment-debtor {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f2744;
}

.company-dashboard .payment-case {
    font-size: 0.75rem;
    color: #5a6a7a;
}

.company-dashboard .payment-amount {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f2744;
}

.company-dashboard .upcoming-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    margin-top: 0.75rem;
    background: #0f2744;
    color: #ffffff;
    border-radius: 0;
    font-size: 0.8125rem;
}

.company-dashboard .upcoming-total strong {
    font-size: 1rem;
    color: #ffffff;
}

/* Activity Timeline - Clean */
.company-dashboard .activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.company-dashboard .activity-timeline::-webkit-scrollbar {
    width: 6px;
}

.company-dashboard .activity-timeline::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.company-dashboard .activity-timeline::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.company-dashboard .activity-timeline::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.company-dashboard .activity-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: #94a3b8;
    font-size: 0.8125rem;
    border-top: 1px solid #ebeef2;
    animation: bounce 1.5s infinite;
}

.company-dashboard .activity-load-more i {
    font-size: 0.75rem;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

.company-dashboard .activity-item {
    display: flex;
    gap: 0.875rem;
    padding: 1rem;
    border-bottom: 1px solid #ebeef2;
    cursor: pointer;
    border-radius: 6px;
    margin: 0 -1rem;
    transition: all 0.2s ease;
}

.company-dashboard .activity-item:hover {
    background: #f8fafc;
    transform: translateX(4px);
}

.company-dashboard .activity-item:hover .activity-title {
    color: #1e40af;
}

.company-dashboard .activity-item:hover .activity-icon {
    transform: scale(1.05);
}

.company-dashboard .activity-item:active {
    transform: translateX(2px);
    background: #f1f5f9;
}

.company-dashboard .activity-item:last-child {
    border-bottom: none;
}

.company-dashboard .activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
    background: #f5f7f9;
    color: #5a6a7a;
    transition: transform 0.2s ease;
}

.company-dashboard .activity-icon i {
    font-weight: 900;
}

.company-dashboard .activity-icon.success {
    background: #e9f5ef;
    color: #2d6a4f;
}

.company-dashboard .activity-icon.warning {
    background: #fdf2f2;
    color: #8b3a3a;
}

.company-dashboard .activity-icon.info {
    background: #e8f0f8;
    color: #1a3a5c;
}

.company-dashboard .activity-icon.court {
    background: #f0eef5;
    color: #5a4a7a;
}

.company-dashboard .activity-icon.completed {
    background: #e9f5ef;
    color: #2d6a4f;
}

.company-dashboard .activity-icon.new {
    background: #e8f0f8;
    color: #1a3a5c;
}

.company-dashboard .activity-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f2744;
}

.company-dashboard .activity-time {
    font-size: 0.75rem;
    color: #8a9aaa;
}

.company-dashboard .activity-description {
    font-size: 0.8125rem;
    color: #5a6a7a;
    line-height: 1.5;
}

.company-dashboard .activity-arrow {
    display: flex;
    align-items: center;
    color: #cbd5e1;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    opacity: 0;
}

.company-dashboard .activity-item:hover .activity-arrow {
    opacity: 1;
    color: #1e40af;
    transform: translateX(4px);
}

/* Table Styles - Professional */
.company-dashboard .company-case-table {
    overflow-x: auto;
}

.company-dashboard .cases-table {
    width: 100%;
    border-collapse: collapse;
}

.company-dashboard .cases-table th {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #5a6a7a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-align: left;
    background: #f5f7f9;
    border-bottom: 1px solid #dde3e9;
}

.company-dashboard .cases-table td {
    font-size: 0.8125rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #ebeef2;
    color: #1a2b3c;
}

.company-dashboard .cases-table tbody tr:hover {
    background: #fafbfc;
}

/* Status Badges - Subtle Professional */
.company-dashboard .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 0;
}

.company-dashboard .status-badge.status-active {
    background: #e9f5ef;
    color: #2d6a4f;
}

.company-dashboard .status-badge.status-pending {
    background: #fef9e7;
    color: #b8860b;
}

.company-dashboard .status-badge.status-completed {
    background: #f0f3f5;
    color: #5a6a7a;
}

.company-dashboard .status-badge.status-dispute {
    background: #fdf2f2;
    color: #8b3a3a;
}

.company-dashboard .status-badge.status-court {
    background: #f0eef5;
    color: #5a4a7a;
}

.company-dashboard .status-badge.status-payment_plan {
    background: #e9f5ef;
    color: #2d6a4f;
}

/* Phase Badges - Professional */
.company-dashboard .phase-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 0;
    background: #f5f7f9;
    color: #5a6a7a;
}

/* Table Controls - Clean */
.company-dashboard .table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ebeef2;
}

.company-dashboard .search-box {
    position: relative;
    flex: 1;
    max-width: 320px;
}

.company-dashboard .search-box input {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    font-size: 0.8125rem;
    border: 1px solid #dde3e9;
    border-radius: 0;
    background: #f5f7f9;
    transition: all 0.15s ease;
}

.company-dashboard .search-box input:focus {
    outline: none;
    border-color: #0f2744;
    background: #ffffff;
}

.company-dashboard .search-box .search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8a9aaa;
    font-size: 0.8125rem;
}

.company-dashboard .filter-select {
    padding: 0.625rem 2rem 0.625rem 0.875rem;
    font-size: 0.8125rem;
    border: 1px solid #dde3e9;
    border-radius: 0;
    background: #f5f7f9;
    color: #1a2b3c;
    cursor: pointer;
}

.company-dashboard .filter-select:focus {
    outline: none;
    border-color: #0f2744;
}

/* Pagination - Professional */
.company-dashboard .table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #ebeef2;
}

.company-dashboard .pagination-info {
    font-size: 0.8125rem;
    color: #5a6a7a;
}

.company-dashboard .pagination-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border: 1px solid #dde3e9;
    background: #ffffff;
    color: #1a2b3c;
    cursor: pointer;
    transition: all 0.15s ease;
}

.company-dashboard .pagination-btn:hover:not(:disabled) {
    border-color: #0f2744;
    color: #0f2744;
}

.company-dashboard .pagination-btn.active {
    background: #0f2744;
    border-color: #0f2744;
    color: #ffffff;
}

/* Card Actions Link */
.company-dashboard .card-actions {
    margin-left: auto;
}

.company-dashboard .btn-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0f2744;
    text-decoration: none;
}

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

/* Responsive - Company Dashboard */
@media (max-width: 1200px) {
    .company-dashboard .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .company-dashboard .stats-grid.stats-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 968px) {
    .company-dashboard .status-overview-grid {
        grid-template-columns: 1fr;
    }

    .company-dashboard .quick-actions-bar {
        flex-wrap: wrap;
    }

    .company-dashboard .stats-grid.stats-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .company-dashboard .stats-grid,
    .company-dashboard .stats-grid.stats-grid-4 {
        grid-template-columns: 1fr;
    }

    .company-dashboard .table-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .company-dashboard .search-box {
        max-width: 100%;
    }
}

/* ========================================
   PROFESSIONAL REPORT MODAL - Banking Style
   ======================================== */

.report-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 39, 68, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.report-modal {
    background: #ffffff;
    width: 100%;
    max-width: 540px;
    border: 1px solid #dde3e9;
    box-shadow: 0 8px 32px rgba(15, 39, 68, 0.2);
}

.report-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: #0f2744;
    color: #ffffff;
}

.report-modal-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.report-modal-title i {
    font-size: 1.25rem;
    opacity: 0.9;
}

.report-modal-title h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.report-modal-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.report-modal-close:hover {
    opacity: 1;
}

.report-modal-body {
    padding: 1.5rem;
}

.report-modal-subtitle {
    font-size: 0.875rem;
    color: #5a6a7a;
    margin-bottom: 1.5rem;
}

.report-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.report-option {
    cursor: pointer;
}

.report-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.report-option-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #f5f7f9;
    border: 1px solid #dde3e9;
    transition: all 0.15s ease;
}

.report-option input:checked + .report-option-content {
    background: #e8f0f8;
    border-color: #0f2744;
}

.report-option:hover .report-option-content {
    border-color: #0f2744;
}

.report-option-icon {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #dde3e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #5a6a7a;
    flex-shrink: 0;
}

.report-option input:checked + .report-option-content .report-option-icon {
    background: #0f2744;
    border-color: #0f2744;
    color: #ffffff;
}

.report-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.report-option-text strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f2744;
}

.report-option-text span {
    font-size: 0.75rem;
    color: #5a6a7a;
}

.report-format-section {
    padding-top: 1rem;
    border-top: 1px solid #ebeef2;
}

.report-format-section h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f2744;
    margin-bottom: 0.75rem;
}

.report-formats {
    display: flex;
    gap: 0.5rem;
}

.report-format {
    cursor: pointer;
    flex: 1;
}

.report-format input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.format-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    background: #f5f7f9;
    border: 1px solid #dde3e9;
    transition: all 0.15s ease;
}

.format-btn i {
    font-size: 1.25rem;
    color: #5a6a7a;
}

.format-btn span {
    font-size: 0.75rem;
    font-weight: 500;
    color: #5a6a7a;
}

.report-format input:checked + .format-btn {
    background: #0f2744;
    border-color: #0f2744;
}

.report-format input:checked + .format-btn i,
.report-format input:checked + .format-btn span {
    color: #ffffff;
}

.report-format:hover .format-btn {
    border-color: #0f2744;
}

.report-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #f5f7f9;
    border-top: 1px solid #dde3e9;
}

.report-modal-footer .btn-secondary {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: #ffffff;
    border: 1px solid #dde3e9;
    color: #1a2b3c;
    cursor: pointer;
    transition: all 0.15s ease;
}

.report-modal-footer .btn-secondary:hover {
    border-color: #0f2744;
    color: #0f2744;
}

.report-modal-footer .btn-primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: #0f2744;
    border: 1px solid #0f2744;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.report-modal-footer .btn-primary:hover {
    background: #1a3a5c;
}

/* ==========================================
   DELETED CASES / QUARANTINE SECTION
   ========================================== */

.deleted-cases-section {
    margin-bottom: 2rem;
}

.quarantine-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    color: #d97706;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    margin-left: 0.5rem;
}

.deleted-cases-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.deleted-case-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    transition: all 0.2s;
}

.deleted-case-item:hover {
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.deleted-case-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.deleted-case-icon {
    width: 40px;
    height: 40px;
    background: #fef3c7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    font-size: 1.1rem;
}

.deleted-case-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.deleted-case-number {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.deleted-case-debitor {
    font-size: 0.85rem;
    color: var(--text-light);
}

.deleted-case-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.deleted-case-amount {
    text-align: right;
}

.deleted-case-amount-value {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
}

.deleted-case-amount-label {
    font-size: 0.75rem;
    color: var(--text-light);
}

.deleted-case-timer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #fde68a;
}

.deleted-case-timer i {
    color: #d97706;
}

.deleted-case-timer-text {
    display: flex;
    flex-direction: column;
}

.deleted-case-timer-value {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.deleted-case-timer-label {
    font-size: 0.7rem;
    color: var(--text-light);
}

.deleted-case-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-restore {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: #16a34a;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-restore:hover {
    background: #15803d;
}

.btn-restore:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.deleted-cases-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
}

.deleted-cases-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .deleted-case-item {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .deleted-case-meta {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .deleted-case-actions {
        width: 100%;
    }

    .btn-restore {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================ */
/* ALERT CARDS */
/* ============================================ */
.alert-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 4px solid;
}

.alert-card.alert-warning {
    border-left-color: #f59e0b;
    background: linear-gradient(90deg, #fef3c7 0%, white 15%);
}

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

.alert-warning .alert-icon {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    color: #f59e0b;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.alert-message {
    font-size: 0.95rem;
    color: var(--text-light);
    margin: 0;
}

.alert-action-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.alert-action-btn:hover {
    background: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================ */
/* PENDING PAYMENT PLANS */
/* ============================================ */
.pending-plan-item {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.pending-plan-item:hover {
    background: var(--background-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
    border-color: var(--primary-color) !important;
}

.pending-plan-item:last-child {
    border-bottom: none;
}

.pending-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.pending-plan-info {
    flex: 1;
}

.pending-plan-case {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.pending-plan-debitor {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.pending-plan-requested {
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pending-plan-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
}

.pending-plan-detail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pending-plan-detail-label {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.pending-plan-detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.pending-plan-detail-value.highlight {
    color: var(--primary-color);
}

.pending-plan-detail-value.muted {
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: normal;
}

/* Footer med info og annuller-knap */
.pending-plan-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.pending-plan-info-text {
    font-size: 0.9rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pending-plan-info-text i {
    color: var(--primary-color);
}

.pending-plan-cancel-btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.pending-plan-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-approve {
    background: #10b981;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-approve:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-reject {
    background: white;
    color: #dc2626;
    border: 2px solid #dc2626;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-reject:hover {
    background: #dc2626;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.pending-plans-empty {
    padding: 3rem;
    text-align: center;
    color: var(--text-light);
}

.pending-plans-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

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

.collapsible-card {
    transition: all 0.3s ease;
}

.collapsible-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 3rem;
}

.collapsible-header:hover {
    opacity: 0.9;
}

.card-header-text {
    flex: 1;
}

.collapse-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: 0;
    color: var(--text-light);
    transition: all 0.3s ease;
}

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

.collapsible-header:hover .collapse-toggle {
    background: var(--primary-color);
    color: white;
}

/* Collapsed state */
.collapsible-card.collapsed .collapsible-content {
    display: none;
}

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

.collapsible-card.collapsed {
    padding-bottom: 1.5rem;
}

.collapsible-card.collapsed .card-header {
    margin-bottom: 0;
}

/* Animation for smooth collapse */
.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Section counter badge - red notification style */
.section-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    background: #dc2626;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 0.75rem;
}

/* Hide badges when count is 0 or empty */
.section-count-badge:empty,
.section-count-badge[data-count="0"] {
    display: none !important;
}

/* Mobile/Desktop title toggle - default desktop */
.title-full {
    display: inline;
}
.title-mobile {
    display: none;
}

/* ============================================
   NOTIFICATION SYSTEM
   ============================================ */

.notification-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.notification-btn {
    position: relative;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #5a6a7a;
    font-size: 1.125rem;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-btn:hover {
    color: var(--primary-color);
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    line-height: 1;
    z-index: 1;
}

.notification-badge:empty,
.notification-badge[data-count="0"] {
    display: none;
}

/* Nav icon with badge (for overdue invoices counter) */
.nav-icon-wrapper {
    position: relative;
    display: inline-flex;
}

.nav-icon-badge {
    position: absolute;
    top: -8px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    line-height: 1;
    z-index: 1;
}

.nav-icon-badge:empty,
.nav-icon-badge[data-count="0"] {
    display: none !important;
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 420px;
    max-height: 480px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

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

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.notification-header h4 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f2744;
}

.mark-all-read {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.mark-all-read:hover {
    text-decoration: underline;
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    max-height: 340px;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.15s ease;
}

.notification-item:hover {
    background: #f8fafc;
}

.notification-item.clickable:hover {
    background: #e8f4fd;
}

.notification-item.unread {
    background: #f0f7ff;
}

.notification-item.unread:hover {
    background: #e8f2ff;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.notification-icon.success {
    background: #e9f5ef;
    color: #2d6a4f;
}

.notification-icon.warning {
    background: #fef3c7;
    color: #92400e;
}

.notification-icon.info {
    background: #e8f0f8;
    color: #1a3a5c;
}

.notification-icon.court {
    background: #f0eef5;
    color: #5a4a7a;
}

.notification-icon i {
    font-weight: 900;
}

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

.notification-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0f2744;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notification-title .case-number {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.8125rem;
}

.notification-desc {
    font-size: 0.75rem;
    color: #5a6a7a;
    line-height: 1.4;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-time {
    font-size: 0.6875rem;
    color: #9ca3af;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: auto;
}

.notification-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.notification-footer a {
    color: var(--primary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
}

.notification-footer a:hover {
    text-decoration: underline;
}

.notification-loading,
.notification-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #9ca3af;
    font-size: 0.875rem;
}

.notification-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: #9ca3af;
    font-size: 0.8125rem;
    border-top: 1px solid #f3f4f6;
}

/* ============================================
   PENDING PAYMENT PLAN NOTICE
   ============================================ */

.pending-plan-notice {
    padding: 1.5rem;
}

.pending-plan-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.pending-plan-icon {
    width: 48px;
    height: 48px;
    background: var(--status-info-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pending-plan-icon i {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.pending-plan-title {
    flex: 1;
}

.pending-plan-title h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.pending-plan-title p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

.pending-plan-header .status-badge {
    flex-shrink: 0;
}

.status-badge.status-pending {
    background: var(--status-info-bg);
    color: var(--status-info);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pending-plan-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 1.5rem 0;
    background: var(--background-light);
    margin: 1.5rem -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.pending-plan-detail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pending-plan-detail .detail-label {
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pending-plan-detail .detail-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
}

.pending-plan-detail .detail-value.highlight {
    color: var(--primary-color);
}

.pending-plan-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--status-info-bg);
    border-left: 3px solid var(--primary-color);
}

.pending-plan-info i {
    color: var(--primary-color);
    font-size: 1rem;
}

.pending-plan-info span {
    font-size: 0.9rem;
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .pending-plan-header {
        flex-wrap: wrap;
    }

    .pending-plan-details {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   FOGDESAGER - Professional Banking Style
   ===================================================== */

/* Upcoming Court Dates Section */
.upcoming-court-dates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.court-date-card {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.court-date-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-color), #7c3aed);
}

.court-date-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.court-date-primary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.court-date-calendar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 1rem;
    border-radius: 0;
    text-align: center;
    min-width: 80px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.court-date-calendar .calendar-month {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.court-date-calendar .calendar-day {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

.court-date-calendar .calendar-year {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}

.court-date-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.court-date-time {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.court-date-time i {
    color: var(--primary-color);
}

.court-date-location {
    font-size: 0.95rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.court-date-location i {
    color: #dc2626;
}

.court-date-case {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.court-case-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.case-number-badge {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-color);
    background: var(--status-info-bg);
    padding: 0.25rem 0.625rem;
    display: inline-block;
    border-radius: 0;
}

.court-case-info .debtor-name {
    font-weight: 600;
    color: var(--text-dark);
}

.court-case-amount {
    text-align: right;
}

.court-case-amount .amount-label {
    font-size: 0.8rem;
    color: var(--text-light);
    display: block;
}

.court-case-amount .amount-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.court-date-actions {
    display: flex;
    gap: 0.75rem;
}

.court-date-actions .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* Court Table Cells */
.debtor-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.debtor-cell .debtor-name {
    font-weight: 600;
    color: var(--text-dark);
}

.debtor-cell .debtor-id {
    font-size: 0.8rem;
    color: var(--text-light);
}

.court-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.court-cell .court-name {
    font-weight: 600;
    color: var(--text-dark);
}

.court-cell .court-address {
    font-size: 0.8rem;
    color: var(--text-light);
}

.date-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-cell .date-primary {
    font-weight: 600;
    color: var(--text-dark);
}

.date-cell .date-time {
    font-size: 0.8rem;
    color: var(--text-light);
}

.amount-cell {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1rem;
}

/* Court Status Badges */
.status-badge.status-court-scheduled {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
    padding: 0.375rem 0.75rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.status-court-enforcement {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
    padding: 0.375rem 0.75rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.status-court-submitted {
    background: rgba(3, 105, 161, 0.1);
    color: #0369a1;
    padding: 0.375rem 0.75rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Action Buttons in Table */
.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 0;
    border: 1px solid var(--border-color);
    background: var(--white);
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--status-info-bg);
}

.btn-icon.btn-icon-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.btn-icon.btn-icon-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Enforcement Section */
.enforcement-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.enforcement-case {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 1.25rem;
}

.enforcement-case-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.enforcement-case-header .case-ref {
    font-weight: 700;
    color: var(--primary-color);
}

.enforcement-case-header .debtor-ref {
    font-weight: 600;
    color: var(--text-dark);
}

.enforcement-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.enforcement-asset {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.enforcement-asset .asset-icon {
    width: 44px;
    height: 44px;
    background: var(--status-info-bg);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border-radius: 0;
}

.enforcement-asset .asset-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.enforcement-asset .asset-name {
    font-weight: 600;
    color: var(--text-dark);
}

.enforcement-asset .asset-value {
    font-size: 0.875rem;
    color: var(--text-light);
}

.enforcement-asset .asset-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 0;
}

.enforcement-asset .asset-status.status-pending {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

.enforcement-coverage {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.enforcement-coverage .coverage-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.enforcement-coverage .coverage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #059669);
    border-radius: 0;
}

.enforcement-coverage .coverage-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.enforcement-coverage .coverage-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.enforcement-coverage .coverage-value {
    font-weight: 700;
}

.enforcement-coverage .coverage-value.coverage-full {
    color: #059669;
}

/* Recovery Highlight */
.recovery-highlight {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 0;
    margin-bottom: 1.5rem;
}

.recovery-highlight .recovery-amount {
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1.2;
}

.recovery-highlight .recovery-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.25rem;
}

/* Stat Success Card */
.stat-card.stat-success {
    border-left: 4px solid #059669;
}

.stat-card.stat-success .stat-icon {
    color: #059669;
    background: rgba(5, 150, 105, 0.1);
}

/* Activity Icons */
.activity-icon.activity-court {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.activity-icon.activity-success {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.activity-icon.activity-document {
    background: rgba(3, 105, 161, 0.1);
    color: #0369a1;
}

/* Case Row Hover Effect */
.case-row {
    cursor: pointer;
    transition: all 0.2s ease;
}

.case-row:hover {
    background: rgba(37, 99, 235, 0.03);
}

.case-row:hover .case-number-link {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Responsive for Fogdesager */
@media (max-width: 768px) {
    .upcoming-court-dates {
        grid-template-columns: 1fr;
    }

    .court-date-primary {
        flex-direction: column;
        align-items: flex-start;
    }

    .court-date-case {
        flex-direction: column;
        gap: 1rem;
        text-align: left;
    }

    .court-case-amount {
        text-align: left;
    }

    .court-date-actions {
        width: 100%;
    }

    .court-date-actions .btn-sm {
        flex: 1;
        justify-content: center;
    }

    .enforcement-asset {
        flex-wrap: wrap;
    }

    .enforcement-asset .asset-status {
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }
}

/* ========================================
   DEBITOR DASHBOARD - MOBILE OPTIMERING
   ======================================== */

/* Tablet og ned */
@media (max-width: 768px) {
    /* Dashboard wrapper */
    .dashboard-wrapper {
        padding: 2rem 0;
        padding-top: calc(70px + 2.5rem);
        min-height: 100vh;
    }

    /* Case tabs - horisontalt scrollbar */
    .case-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 1rem;
        gap: 0.5rem;
    }

    .case-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        padding: 0.875rem 1.25rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Timeline items */
    .timeline-item {
        padding: 0.875rem;
    }

    .timeline-icon {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }
}

/* Mobil */
@media (max-width: 640px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Container padding */
    .container {
        padding: 0 1rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Dashboard wrapper */
    .dashboard-wrapper {
        padding: 1.5rem 0 2rem 0;
        padding-top: calc(60px + 2rem);
        min-height: 100vh;
        overflow-x: hidden;
    }

    /* Welcome section */
    .welcome-section {
        margin-bottom: 1.5rem;
        text-align: center;
        padding: 0;
    }

    .welcome-section h1 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .welcome-section p {
        font-size: 0.9rem;
    }

    /* Dashboard cards */
    .dashboard-card {
        padding: 1.25rem;
        margin-bottom: 1rem;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Fix grid gap på mobil */
    .dashboard-grid {
        gap: 0.5rem;
        max-width: 100%;
    }

    /* Case items overflow fix */
    .case-item,
    .case-header-row,
    .case-details-expanded {
        max-width: 100%;
        overflow-x: hidden;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .card-icon {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }

    .card-header h2 {
        font-size: 1.1rem;
    }

    .card-header p {
        font-size: 0.85rem;
    }

    /* Collapsible headers */
    .collapsible-header {
        padding: 1rem;
    }

    .card-header-text h2 {
        font-size: 1rem;
    }

    /* Mobile title toggle */
    .title-full {
        display: none;
    }
    .title-mobile {
        display: inline;
    }

    /* Collapsed card consistent height */
    .collapsible-card.collapsed {
        min-height: 85px;
    }

    /* Mobile card icon - smaller size with badge */
    .card-icon {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
    }

    .card-icon .section-count-badge {
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        font-size: 0.65rem;
        top: -5px;
        left: -5px;
    }

    /* Pending Plans Card - Mobile layout */
    #pendingPlansCard .collapsible-header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
    }

    #pendingPlansCard .card-header-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    #pendingPlansCard .card-header-text h2 {
        font-size: 1rem;
        margin: 0;
    }

    #pendingPlansCard .card-header-text p {
        font-size: 0.75rem;
        color: var(--text-light);
        margin: 0;
    }

    #pendingPlansCard .collapse-toggle {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Cases Card - Mobile styling */
    #casesCard .collapsible-header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
    }

    #casesCard .card-header-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    #casesCard .card-header-text h2 {
        font-size: 1rem;
        margin: 0;
    }

    #casesCard .card-header-text p {
        font-size: 0.75rem;
        color: var(--text-light);
        margin: 0;
    }

    #casesCard .collapse-toggle {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Chat Card - Mobile styling */
    #chatCard .collapsible-header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
    }

    #chatCard .card-header-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    #chatCard .card-header-text h2 {
        font-size: 1rem;
        margin: 0;
    }

    #chatCard .card-header-text p {
        font-size: 0.75rem;
        color: var(--text-light);
        margin: 0;
    }

    #chatCard .collapse-toggle {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Case items */
    .case-item {
        margin-bottom: 1rem;
    }

    .case-header-row {
        padding: 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .case-main-info {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .case-main-info .case-status-badge {
        order: 2;
        margin-left: auto;
    }

    .case-title {
        order: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .case-title .case-number {
        font-weight: 600;
    }

    .case-title .case-creditor {
        width: 100%;
    }

    .case-number {
        font-size: 1rem;
    }

    .case-creditor {
        font-size: 0.85rem;
    }

    .case-summary-info {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-light);
    }

    .case-amount-large {
        font-size: 1.35rem;
    }

    .case-meta {
        font-size: 0.8rem;
    }

    /* Case details expanded */
    .case-details-expanded {
        padding: 0;
    }

    .tab-content {
        padding: 1rem;
    }

    /* Tabs */
    .case-tabs {
        padding: 0 0.75rem;
    }

    .tab-btn {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    /* Case breakdown */
    .case-breakdown {
        padding: 1rem;
    }

    .detail-row {
        padding: 0.625rem 0;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .detail-label {
        font-size: 0.85rem;
    }

    .detail-value {
        font-size: 0.9rem;
    }

    /* Payment plan info */
    .payment-plan-info {
        padding: 1rem;
    }

    .plan-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .plan-status {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }

    .plan-item {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Case actions */
    .case-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .case-actions button {
        width: 100%;
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }

    /* =============================================
       PENDING PLANS - MOBILE OPTIMERING
       ============================================= */
    .pending-plan-item {
        padding: 1rem;
    }

    .pending-plan-header {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .pending-plan-info {
        width: calc(100% - 100px);
        padding-right: 0.5rem;
    }

    /* Venstre info-kolonne */
    .pending-plan-info-left {
        display: flex;
        flex-direction: column;
    }

    .pending-plan-status-badge {
        margin-top: 0.375rem;
        padding: 0.15rem 0.5rem !important;
        font-size: 0.75rem !important;
        gap: 0.35rem !important;
    }

    .pending-plan-status-badge i {
        font-size: 0.6rem !important;
    }

    /* Case row tilpasning */
    .pending-plan-case-row {
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-bottom: 0.25rem;
    }

    .pending-plan-case-row .case-number {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
    }

    .pending-plan-case-row span:last-child {
        font-size: 1rem !important;
    }

    .pending-plan-case-number {
        font-size: 1.1rem;
    }

    .pending-plan-creditor {
        font-size: 1rem;
    }

    .pending-plan-separator {
        display: none;
    }

    /* Status kompakt */
    .pending-plan-status {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }

    .pending-plan-status i {
        font-size: 0.65rem;
    }

    /* Beløb - lodret alignment */
    .pending-plan-amount {
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .pending-plan-amount-label {
        font-size: 0.75rem;
        margin-bottom: 0.125rem;
    }

    .pending-plan-amount-value {
        font-size: 1.2rem;
        white-space: nowrap;
    }

    /* 2-kolonne grid - elegant styling */
    .pending-plan-details {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
        padding: 1.25rem !important;
        margin: 0.75rem 0;
        border-radius: 12px;
    }

    .pending-plan-detail {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    /* Overskriver inline styles på labels */
    .pending-plan-detail > div:first-child {
        font-size: 0.8rem !important;
        color: var(--text-light) !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0 !important;
    }

    /* Overskriver inline styles på værdier */
    .pending-plan-detail > div:last-child {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        white-space: nowrap;
    }

    .pending-plan-detail-label {
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .pending-plan-detail-value {
        font-size: 1.1rem;
        font-weight: 600;
    }

    .pending-plan-detail-value.highlight {
        font-size: 1.15rem;
    }

    /* Skjul mindre vigtige felter på mobil */
    .pending-plan-detail.hide-mobile {
        display: none;
    }

    /* Footer - stacked layout */
    .pending-plan-footer {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    .pending-plan-info-text {
        font-size: 0.7rem;
        text-align: center;
    }

    .pending-plan-info-text span {
        font-size: 0.7rem !important;
    }

    .pending-plan-cancel-btn {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.25rem !important;
        font-size: 1rem !important;
    }

    /* Legacy classes */
    .pending-plan-case {
        font-size: 0.85rem;
    }

    .pending-plan-debitor {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .pending-plan-requested {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }

    /* Actions i fuld bredde */
    .pending-plan-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .pending-plan-actions .btn-approve,
    .pending-plan-actions .btn-reject {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    /* Total summary elegant */
    .total-summary-elegant {
        padding: 1.25rem;
        gap: 1.25rem;
        margin-top: 1.5rem;
    }

    .summary-icon-large {
        font-size: 2.5rem;
    }

    .summary-amount-large {
        font-size: 1.75rem;
    }

    .summary-subtitle {
        font-size: 0.75rem;
    }

    .btn-pay-all-elegant {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }

    .btn-pay-all-elegant .btn-icon {
        display: none;
    }

    /* Chat section - Mobile optimeret */
    .chat-container {
        gap: 1rem;
        display: flex;
        flex-direction: column;
    }

    .chat-case-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .chat-case-selector label {
        font-size: 0.8rem;
    }

    .chat-case-dropdown {
        padding: 0.75rem;
        font-size: 1rem;
    }

    .chat-messages {
        max-height: 50vh;
        min-height: 200px;
        padding: 1rem;
        scroll-behavior: smooth;
        gap: 1rem;
    }

    .message-bubble {
        max-width: 85%;
        padding: 0.875rem 1rem;
    }

    .message-text {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Inline input layout for mobil - elegant stretch design */
    .chat-input-container {
        display: flex;
        flex-direction: row;
        align-items: stretch; /* Knappen strækkes til samme højde som tekstfeltet */
        gap: 0;
        background: var(--white);
        border-top: 1px solid var(--border-color);
        margin: 0 -1rem -1rem -1rem;
        padding: 1rem;
    }

    .chat-input {
        flex: 1;
        padding: 0.875rem 1rem;
        font-size: 1rem;
        min-height: 80px;
        resize: none;
        border: 2px solid var(--border-color);
        border-right: none; /* Fjern højre border - knappen tager over */
    }

    .chat-input:focus {
        border-color: var(--primary-color);
    }

    .btn-send {
        width: auto;
        min-width: 56px;
        height: auto;
        padding: 0 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: none;
        align-self: stretch; /* Overskriver desktop's flex-end - strækkes til fuld højde */
    }

    /* Vis ikon på mobil (overskriver desktop display:none) */
    .btn-send i {
        display: block;
        font-size: 1.1rem;
        color: var(--white);
    }

    /* Skjul tekst i send-knap på mobil, vis kun ikon */
    .btn-send span {
        display: none;
    }

    /* Bedre afsender-info på mobil */
    .sender-name {
        font-size: 0.8rem;
        font-weight: 600;
    }

    .message-timestamp {
        font-size: 0.7rem;
    }

    /* Tydeligere adskillelse mellem beskeder */
    .chat-message {
        margin-bottom: 0.5rem;
    }

    .chat-message.received {
        padding-right: 15%;
    }

    .chat-message.sent {
        padding-left: 15%;
    }

    /* Dato-separator på mobil */
    .chat-date-separator {
        margin: 1.5rem 0;
    }

    .chat-date-separator span {
        font-size: 0.7rem;
        padding: 0.25rem 0.75rem;
    }

    /* Contact section */
    .contact-section {
        padding-top: 1.5rem;
    }

    .contact-section h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .contact-item-compact {
        padding: 0.875rem;
    }

    .contact-icon-small {
        font-size: 1.5rem;
    }

    .contact-label {
        font-size: 0.7rem;
    }

    .contact-value {
        font-size: 0.9rem;
    }

    /* Documents */
    .document-item {
        padding: 0.875rem;
    }

    .document-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .document-name {
        font-size: 0.85rem;
    }

    .btn-document-download {
        padding: 0.625rem 0.875rem;
        font-size: 0.8rem;
    }

    /* Timeline */
    .timeline-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .timeline-icon {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }

    .timeline-title {
        font-size: 0.9rem;
    }

    .timeline-amount {
        font-size: 1rem;
    }

    .timeline-meta {
        font-size: 0.8rem;
    }
}

/* ========================================
   MODAL MOBILE FORBEDRINGER
   ======================================== */

@media (max-width: 640px) {
    /* Full-screen modals på mobil */
    .modal-container {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    .modal-overlay {
        align-items: flex-start;
    }

    .modal-header {
        padding: 1rem 1.25rem;
        position: sticky;
        top: 0;
    }

    .modal-header h2 {
        font-size: 1.1rem;
        gap: 0.5rem;
    }

    .modal-header h2 i {
        font-size: 1.2rem;
    }

    .modal-close {
        font-size: 1.5rem;
        padding: 0.5rem;
    }

    .modal-body {
        padding: 1.25rem;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 1rem 1.25rem;
        flex-direction: column;
        gap: 0.75rem;
        position: sticky;
        bottom: 0;
    }

    .modal-footer button {
        width: 100%;
        padding: 0.875rem;
        font-size: 0.95rem;
    }

    /* Modal case info */
    .modal-case-info {
        padding: 1rem;
        margin-bottom: 1.25rem;
    }

    .modal-case-info .case-number-large {
        font-size: 0.95rem;
    }

    .modal-case-info .amount-value {
        font-size: 1.25rem;
    }

    /* Slider forbedringer til touch */
    .payment-slider-container {
        padding: 2.5rem 0.5rem 2rem;
    }

    .slider-value-bubble {
        font-size: 0.9rem;
        padding: 0.375rem 1rem;
    }

    .payment-slider {
        height: 8px;
    }

    .payment-slider::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }

    .payment-slider::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    .slider-labels-extended {
        font-size: 0.75rem;
        margin-top: 1rem;
    }

    /* Plan preview */
    .plan-preview {
        padding: 1rem;
    }

    .plan-preview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .plan-preview-title {
        font-size: 0.9rem;
    }

    .plan-number-display {
        display: none;
    }

    .plan-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .plan-item {
        padding: 0.625rem 0;
    }

    .plan-item-label {
        font-size: 0.8rem;
    }

    .plan-item-value {
        font-size: 0.95rem;
    }

    .plan-item-value.highlight {
        font-size: 1.1rem;
    }

    /* Visual timeline */
    .visual-timeline {
        padding: 1rem;
        margin-top: 0.75rem;
    }

    .visual-timeline-title {
        font-size: 0.8rem;
    }

    .timeline-visual {
        height: 8px;
        margin: 0.75rem 0;
    }

    .timeline-dates {
        font-size: 0.75rem;
    }

    /* Vilkårs checkbox - forbedret touch target */
    #paymentPlanModal [style*="margin: 1.5rem 2rem"],
    #editPaymentPlanModal [style*="margin: 1.5rem 2rem"] {
        margin: 1rem !important;
        padding: 0.875rem 1rem !important;
    }

    #paymentPlanModal label[style*="display: flex"],
    #editPaymentPlanModal label[style*="display: flex"] {
        gap: 0.625rem !important;
    }

    #paymentPlanModal input[type="checkbox"],
    #editPaymentPlanModal input[type="checkbox"] {
        min-width: 22px !important;
        width: 22px !important;
        height: 22px !important;
    }

    #paymentPlanModal span[style*="font-size: 0.85rem"],
    #editPaymentPlanModal span[style*="font-size: 0.85rem"] {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
    }

    /* Payment options */
    .payment-options-grid {
        gap: 0.75rem;
    }

    .payment-option {
        padding: 1rem;
        flex-direction: row;
        text-align: left;
        gap: 0.875rem;
        min-height: 60px;
    }

    .payment-option-icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .payment-option-title {
        font-size: 0.95rem;
    }

    .payment-option-desc {
        font-size: 0.8rem;
    }

    /* Card form */
    .card-form {
        padding: 1rem;
    }

    .card-form-title {
        font-size: 0.9rem;
    }

    .form-row {
        margin-bottom: 0.875rem;
    }

    .form-label {
        font-size: 0.8rem;
    }

    .form-input {
        padding: 0.875rem;
        font-size: 1rem;
    }

    /* Current plan info (edit modal) */
    .current-plan-info {
        padding: 1rem;
    }

    .current-plan-header {
        font-size: 0.85rem;
    }

    .current-plan-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .current-plan-label {
        font-size: 0.7rem;
    }

    .current-plan-value {
        font-size: 0.9rem;
    }

    /* Plan comparison */
    .comparison-item {
        padding: 0.625rem 0.875rem;
        font-size: 0.85rem;
    }

    /* Payment summary */
    .payment-summary {
        padding: 1rem;
    }

    .payment-summary-row {
        font-size: 0.9rem;
    }

    .payment-summary-row.total .payment-summary-value {
        font-size: 1.1rem;
    }

    /* Success modal */
    .success-icon-container {
        width: 80px;
        height: 80px;
    }

    .success-icon-main {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }

    .success-case-badge {
        padding: 0.75rem 1.5rem;
    }

    .success-case-badge .case-badge-number {
        font-size: 1.25rem;
    }

    #paymentPlanSuccessModal [style*="padding: 2rem"] {
        padding: 1.25rem !important;
    }

    #paymentPlanSuccessModal h3[style*="font-size: 1.4rem"] {
        font-size: 1.15rem !important;
    }
}

/* Små mobiler */
@media (max-width: 400px) {
    /* Yderligere reduktion for små skærme */
    .welcome-section h1 {
        font-size: 1.35rem;
    }

    .case-amount-large {
        font-size: 1.2rem;
    }

    .summary-amount-large {
        font-size: 1.5rem;
    }

    .card-header h2 {
        font-size: 1rem;
    }

    .modal-header h2 {
        font-size: 1rem;
    }

    .btn-pay-all-elegant {
        font-size: 0.85rem;
        padding: 0.75rem 1rem;
    }

    .tab-btn {
        padding: 0.625rem 0.875rem;
        font-size: 0.8rem;
    }
}