/* Invoice Capture Provider Comparison Styles */

.mud-table-sticky-footer .mud-table-container {
    overflow-x: hidden;
    height: calc(100vh - 32px - 91px - 64px + 7px);
}

.mud-simple-table.mud-table-sticky-header * table thead * th {
    position: sticky;
    z-index: 1;
    top: 0;
}

/* Wider percentage columns for better visibility */
.percentage-column {
    min-width: 140px;
    width: 140px;
}

.percentage-column .mud-progress-linear {
    min-width: 80px;
}

/* Dynamic property column styles - Enhanced for resizing and better display */
.dynamic-property-column {
    min-width: 250px;
    width: 250px;
    max-width: 500px;
}

/* PropertyDisplayComponent Styles */
.property-comparison-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    font-size: 0.75rem;
    background-color: var(--mud-palette-info-lighten5);
    border: 1px solid var(--mud-palette-info-lighten2);
    border-radius: 4px;
}

/* Collection property styles */
.collection-comparison-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px;
    font-size: 0.75rem;
    background-color: var(--mud-palette-warning-lighten5);
    border: 1px solid var(--mud-palette-warning-lighten2);
    border-radius: 4px;
}

.collection-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    background-color: var(--mud-palette-warning-lighten3);
    border-radius: 3px;
    color: var(--mud-palette-warning-darken2);
}

.collection-comparison-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.baseline-collection, .candidate-collection {
    display: flex;
    flex-direction: column;
    padding: 2px 4px;
    border-radius: 4px;
    min-height: 20px;
}

.baseline-collection {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.candidate-collection {
    background-color: #fff3e0;
    border-left: 3px solid #ff9800;
}

/* Regular property value containers - Same styling as collections */
.baseline-value, .candidate-value {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    border-radius: 4px;
    min-height: 20px;
    margin-bottom: 4px;
}

.baseline-value {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.candidate-value {
    background-color: #fff3e0;
    border-left: 3px solid #ff9800;
}

/* Value labels */
.value-label {
    font-weight: 600;
    color: #666;
    font-size: 0.65rem;
    margin-bottom: 2px;
}

/* Value text styling */
.value-text {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.7rem;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.2;
    color: #333;
}

/* Enhanced collection value text with conflict highlighting */
.collection-value-text-enhanced {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.65rem;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.4;
    color: #333;
    max-height: 300px;
    overflow-y: auto;
}

/* Collection status summary */
.collection-status-summary {
    margin-top: 8px;
    padding: 8px;
    background-color: var(--mud-palette-grey-lighten5);
    border-radius: 4px;
    border: 1px solid var(--mud-palette-divider);
}

.collection-status-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.collection-item-status-chip {
    font-size: 0.6rem !important;
    height: 20px !important;
    min-width: 30px !important;
    padding: 0 4px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

/* Conflict highlighting in collection text */
.collection-conflict-item {
    background-color: var(--mud-palette-error-lighten4) !important;
    border: 1px solid var(--mud-palette-error-lighten2) !important;
    border-radius: 3px;
    padding: 2px 4px;
    margin: 1px 0;
    font-weight: 600;
}

.collection-match-item {
    background-color: var(--mud-palette-success-lighten4) !important;
    border: 1px solid var(--mud-palette-success-lighten2) !important;
    border-radius: 3px;
    padding: 2px 4px;
    margin: 1px 0;
}

.collection-enrichment-item {
    background-color: var(--mud-palette-warning-lighten4) !important;
    border: 1px solid var(--mud-palette-warning-lighten2) !important;
    border-radius: 3px;
    padding: 2px 4px;
    margin: 1px 0;
}

/* Status indicator styling */
.status-indicator {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.status-chip {
    font-size: 0.65rem !important;
    height: 18px !important;
    min-width: 60px !important;
    padding: 0 6px !important;
}

/* InvoiceCaptureComparisonDialog Styles */
.comparison-dialog {
    height: 90vh !important;
    max-height: 90vh !important;
    display: flex;
    flex-direction: column;
    outline: none; /* Remove focus outline for keyboard handling */
}

.comparison-dialog .mud-dialog-content {
    flex-grow: 1;
    overflow: hidden;
    padding: 0 !important;
}

.dialog-content-wrapper {
    height: 100%;
    overflow-y: auto;
    padding: 24px;
    max-height: calc(90vh - 120px); /* Subtract header and footer space */
}

.properties-container {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.properties-header {
    background: white !important;
    border-bottom: 2px solid var(--mud-palette-primary-lighten2);
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 16px;
}

.property-row {
    border-bottom: 1px solid var(--mud-palette-divider-light);
    transition: all 0.2s ease;
    background-color: var(--mud-palette-surface);
}

.property-row:hover {
    background-color: var(--mud-palette-action-hover);
}

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

.simple-property {
}

.property-value {
    padding: 4px 8px;
    background-color: var(--mud-palette-grey-lighten4);
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    word-wrap: break-word;
    white-space: pre-wrap;
    min-height: 20px;
    width: 100%;
}

/* Stats Card Styling */
.summary-stats-card {
    background: linear-gradient(135deg, var(--mud-palette-surface), var(--mud-palette-grey-lighten5));
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
}

.stats-item {
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider-light);
    transition: all 0.2s ease;
    cursor: pointer;
}

.stats-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stats-item.active {
    border: 2px solid var(--mud-palette-primary, #594ae2);
    background-color: var(--mud-palette-primary-lighten5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stats-label {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    margin-bottom: 4px;
}

.stats-value {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    margin: 0;
}

.stats-value small {
    color: var(--mud-palette-primary, #594ae2) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    background-color: var(--mud-palette-primary-lighten5);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    border: 1px solid var(--mud-palette-primary-lighten3);
    display: inline-block;
}

.stats-item.success .stats-value small {
    color: var(--mud-palette-success-darken1) !important;
    background-color: var(--mud-palette-success-lighten5);
    border-color: var(--mud-palette-success-lighten3);
}

.stats-item.error .stats-value small {
    color: var(--mud-palette-error-darken1) !important;
    background-color: var(--mud-palette-error-lighten5);
    border-color: var(--mud-palette-error-lighten3);
}

.stats-item.warning .stats-value small {
    color: var(--mud-palette-warning-darken1) !important;
    background-color: var(--mud-palette-warning-lighten5);
    border-color: var(--mud-palette-warning-lighten3);
}

.json-content {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
}

/* Ensure expansion panels work well within scrollable container */
.properties-container .mud-expand-panel {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.properties-container .mud-expand-panel:last-child {
    border-bottom: none;
}

/* Custom scrollbar styling for better appearance */
.dialog-content-wrapper::-webkit-scrollbar,
.properties-container::-webkit-scrollbar,
.json-content::-webkit-scrollbar {
    width: 8px;
}

.dialog-content-wrapper::-webkit-scrollbar-track,
.properties-container::-webkit-scrollbar-track,
.json-content::-webkit-scrollbar-track {
    background: var(--mud-palette-background-grey);
    border-radius: 4px;
}

.dialog-content-wrapper::-webkit-scrollbar-thumb,
.properties-container::-webkit-scrollbar-thumb,
.json-content::-webkit-scrollbar-thumb {
    background: var(--mud-palette-text-disabled);
    border-radius: 4px;
}

.dialog-content-wrapper::-webkit-scrollbar-thumb:hover,
.properties-container::-webkit-scrollbar-thumb:hover,
.json-content::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}

/* Custom expansion panel styles */
.complex-property-container {
    border-bottom: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-surface);
}

.complex-property-container:last-child {
    border-bottom: none;
}

.complex-property-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--mud-palette-grey-lighten5);
}

.complex-property-header:hover {
    background-color: var(--mud-palette-action-hover);
}

.expansion-icon-container {
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.complex-property-title {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.complex-property-content {
    padding: 16px;
    background-color: var(--mud-palette-background-grey);
    border-top: 1px solid var(--mud-palette-divider);
}

.nested-property-row {
    border-bottom: 1px solid var(--mud-palette-divider);
    transition: all 0.2s ease;
}

.nested-property-row:hover {
    background-color: var(--mud-palette-action-hover);
}

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

/* Section header with filter indicator */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

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

.filter-chip {
    font-weight: 500;
}

/* Hide filtered out items with smooth animation */
.property-row.filtered-out,
.complex-property-container.filtered-out,
.nested-property-row.filtered-out {
    display: none;
}

/* Keyboard navigation visual feedback */
.comparison-dialog:focus {
    outline: none;
}

/* Selected Properties Grid Styles */
.selected-properties-grid {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    background-color: var(--mud-palette-grey-lighten5);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
}

.property-card {
    border: 1px solid var(--mud-palette-divider);
    transition: all 0.2s ease;
    background-color: var(--mud-palette-surface);
}

.property-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--mud-palette-primary-lighten2);
}

.property-card .mud-card-header {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}

.property-card .mud-card-content {
    padding-top: 8px;
}

/* Property filter integration */
.property-filter-container .property-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

.property-filter-container .property-item:hover {
    background-color: var(--mud-palette-action-hover);
    transform: translateX(4px);
}

/* Enhanced dialog scrolling */
.dialog-content-wrapper {
    height: 100%;
    overflow-y: auto;
    padding: 24px;
    max-height: calc(90vh - 120px); /* Subtract header and footer space */
}

/* Expand/Collapse All Switch Styles */
.section-header {
    margin-bottom: 16px;
}

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

.expand-collapse-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--mud-palette-grey-lighten5);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    min-width: fit-content;
}

.expand-all-switch {
    margin: 0;
}

.filter-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.filter-indicator {
    display: inline-block;
}

.filter-chip {
    font-size: 0.8rem;
}

/* Responsive property grid */
@media (max-width: 959px) {
    .selected-properties-grid .mud-grid-item {
        min-width: 100% !important;
    }
}

@media (min-width: 960px) and (max-width: 1279px) {
    .selected-properties-grid .mud-grid-item {
        min-width: 50% !important;
    }
}

@media (min-width: 1280px) {
    .selected-properties-grid .mud-grid-item {
        min-width: 33.333% !important;
    }
}

@media (min-width: 1920px) {
    .selected-properties-grid .mud-grid-item {
        min-width: 25% !important;
    }
}

/* Responsive adjustments for expand/collapse controls */
@media (max-width: 768px) {
    .section-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .expand-collapse-controls {
        justify-content: center;
    }
}