.compare-container {
    padding: 0.75rem 1.25rem;
    background-color: #f8fafc;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.compare-header {
    margin-bottom: 0.25rem;
    flex-shrink: 0;
}

.compare-header h1 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0;
}

.nav-pills-custom {
    background: #edf2f7;
    padding: 4px;
    border-radius: 30px;
    display: flex;
    gap: 4px;
    width: fit-content;
    margin-bottom: 0.5rem;
}

.nav-pill-item {
    border: none;
    background: transparent;
    padding: 6px 20px;
    border-radius: 25px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a5568;
    transition: all 0.2s ease;
}

.nav-pill-item.active {
    background: #fff;
    color: #0176d3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.config-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.75rem;
    border: 1px solid #edf2f7;
}

.selection-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: flex-start;
}

.db-selector-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    width: 100%;
}

.selector-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    display: block;
}

.btn-compare {
    background: #0176d3 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.compare-actions {
    display: flex;
    gap: 0.5rem;
    /* Added spacing between buttons */
    align-items: center;
    margin-top: 0.75rem;
}

.compare-tabs {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border: 1px solid #e2e8f0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav-tabs-custom {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    background: #fbfcfd;
}

.nav-tab-item {
    padding: 0.75rem 1.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.nav-tab-item.active {
    color: #0176d3;
    border-bottom: 2px solid #0176d3;
    background: #fff;
}

.tab-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.25rem;
    padding-bottom: 80px;
    /* Space for sticky footer */
}

/* Sticky Footer for Action Buttons */
.result-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #ffffff 85%, rgba(255, 255, 255, 0.95) 95%, rgba(255, 255, 255, 0));
    padding: 1rem 1.25rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03);
    z-index: 50;
    backdrop-filter: blur(8px);
}

.btn-cancel-result {
    display: inline-flex;
    align-items: center;
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    padding: 0.28rem 0.75rem !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    cursor: pointer;
    transition: background 0.15s !important;
}

.btn-cancel-result:hover {
    background: #c82333 !important;
}

.btn-save-audit {
    display: inline-flex;
    align-items: center;
    background: #0176d3 !important;
    color: white !important;
    border: none !important;
    padding: 0.28rem 0.75rem !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    cursor: pointer;
    transition: background 0.15s !important;
}

.btn-save-audit:hover {
    background: #014486 !important;
}

.btn-save-audit:disabled {
    background: #94a3b8 !important;
    cursor: not-allowed;
}

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

.summary-item {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #edf2f7;
}

.summary-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #64748b;
}

.diff-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}

.tag-source {
    background: #d8edff;
    color: #014486;
    border: 1px solid #0176d3;
}

.tag-target {
    background: #feded8;
    color: #c23934;
    border: 1px solid #fbc4be;
}

.tag-common {
    background: #d0f0dd;
    color: #04844b;
    border: 1px solid #04844b;
}

/* Table Structure Diff Styles */
.structure-diff-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.table-diff-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 1rem;
}

.table-diff-header {
    padding: 12px 16px;
    background: #fbfcfd;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #e2e8f0;
}

.different-table .table-diff-header {
    border-left: 4px solid #f59e0b;
}

.identical-table .table-diff-header {
    border-left: 4px solid #04844b;
}

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

.column-diff-table th {
    background: #f8fafc;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    padding: 10px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.column-diff-table td {
    padding: 10px 16px;
    font-size: 0.8125rem;
    border-bottom: 1px solid #f1f5f9;
}

.badge-status-modified {
    background-color: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.badge-status-missing {
    background-color: #feded8;
    color: #c23934;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.badge-status-extra {
    background-color: #d0f0dd;
    color: #04844b;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
}

/* Modal styles */
.report-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-modal {
    background: #fff;
    width: 90%;
    max-width: 1000px;
    height: 90vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.report-header {
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Professional Audit Table */
.audit-scroll-container {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

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

.audit-table-pro th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    padding: 1rem;
    text-align: left;
    font-size: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    z-index: 10;
}

.audit-table-pro td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

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

.pagination-container {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-top: none;
    background: #fff;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: #a0aec0;
}

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

/* Global Error Alert Styles */
.alert-danger {
    position: relative;
    overflow: hidden;
}

.alert-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #dc3545;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.alert-danger .alert-heading {
    color: #c82333;
    font-size: 0.95rem;
}

.alert-danger .btn-close {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.alert-danger .btn-close:hover {
    opacity: 1;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-in, slideDown 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
    }

    to {
        transform: translateY(0);
    }
}

/* Compact Error Toast - Top Right */
.error-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #dc3545;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 9999;
    max-width: 400px;
    font-size: 0.875rem;
    font-weight: 500;
}

.error-toast .error-message {
    flex: 1;
}

.error-toast .toast-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0;
    font-size: 0.75rem;
}

.error-toast .toast-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.animate-slide-in {
    animation: slideInRight 0.3s ease-out;
}

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

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


/* ========================================
   JOBS PANEL  (Phase 2)
   ======================================== */

.jobs-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.jobs-panel.collapsed .jobs-list {
    display: none;
}

/* ── Header ── */

.jobs-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.75rem 0 0;
    background: #fbfcfd;
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.15s ease;
}

.jobs-panel.collapsed .jobs-panel-header {
    border-bottom: none;
}

/* Toggle button takes all left space */
.jobs-panel-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a1a1a;
    transition: background 0.15s ease;
}

.jobs-panel-toggle:hover {
    background: #f1f5f9;
}

.jobs-panel-title-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a1a1a;
}

.jobs-active-badge {
    background: #0176d3;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.7; }
}

.jobs-count-dim {
    font-size: 0.74rem;
    color: #94a3b8;
    font-weight: 500;
}

.jobs-chevron {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: auto;
    transition: transform 0.2s ease;
}

/* + New Compare button */
.btn-new-compare {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #0176d3;
    background: #eef6ff;
    color: #0176d3;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-new-compare:hover {
    background: #0176d3;
    color: #fff;
}

/* ── Job List ── */

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 300px;
    overflow-y: auto;
}

/* ── Job Card ── */

.job-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid transparent;
    transition: background 0.12s ease;
    gap: 1rem;
}

.job-card:last-child { border-bottom: none; }
.job-card:hover      { background: #f8fafc; }

.job-card.job-running   { border-left-color: #0176d3; background: #fafcff; }
.job-card.job-succeeded { border-left-color: #04844b; }
.job-card.job-failed    { border-left-color: #dc3545; }
.job-card.job-cancelled { border-left-color: #94a3b8; }
.job-card.job-queued    { border-left-color: #f59e0b; }

/* "Mine" highlight */
.job-card.mine {
    background: #f0f8ff;
}

.job-card-left {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}

.job-status-icon {
    flex-shrink: 0;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

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

/* Env + type row */
.job-env-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
}

.job-env-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
}

.job-env-pill.src {
    background: #d8edff;
    color: #014486;
    border: 1px solid #aed6f8;
}

.job-env-pill.tgt {
    background: #feded8;
    color: #c23934;
    border: 1px solid #fbc4be;
}

.job-arrow {
    font-size: 0.7rem;
    color: #94a3b8;
}

.job-type-chip {
    font-size: 0.66rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
}

.job-mine-badge {
    font-size: 0.64rem;
    font-weight: 700;
    color: #0176d3;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
}

/* Status sub-row */
.job-sub-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.job-sub-text {
    font-size: 0.72rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-sub-text.muted {
    color: #94a3b8;
}

.job-sub-text.success-text {
    color: #04844b;
}

.job-queue-pos {
    font-size: 0.68rem;
    font-weight: 700;
    background: #fef3c7;
    color: #92400e;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    margin-left: 0.15rem;
}

/* Error toggle button */
.job-error-toggle {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #64748b;
    gap: 0.2rem;
}

/* Inline error expand */
.job-error-expand {
    font-size: 0.72rem;
    color: #c23934;
    background: #fff5f5;
    border: 1px solid #fbc4be;
    border-radius: 5px;
    padding: 0.3rem 0.6rem;
    margin-top: 0.25rem;
    word-break: break-word;
}

/* ── Right Side ── */

.job-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
    min-width: 140px;
}

.job-elapsed {
    font-size: 0.7rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.job-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.job-prog-bar {
    flex: 1;
    height: 5px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.job-prog-fill {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, #0176d3 0%, #014486 100%);
    transition: width 0.4s ease;
    min-width: 4px;
}

.job-prog-fill.queued-anim {
    width: 100% !important;
    background-size: 200% 100%;
    background-image: linear-gradient(90deg, #f59e0b 0%, #fcd34d 50%, #f59e0b 100%);
    animation: shimmer 1.5s infinite;
}

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

.job-prog-pct {
    font-size: 0.7rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: right;
}

/* ── Action Buttons ── */

.job-actions {
    display: flex;
    gap: 0.3rem;
}

.jbtn {
    display: inline-flex;
    align-items: center;
    font-size: 0.71rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    background: transparent;
}

.jbtn.view {
    background: #eef6ff;
    border-color: #aed6f8;
    color: #0176d3;
}

.jbtn.view:hover {
    background: #d8edff;
    border-color: #0176d3;
}

.jbtn.retry {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

.jbtn.retry:hover:not(:disabled) {
    background: #fef3c7;
    border-color: #f59e0b;
}

.jbtn.cancel {
    background: #fff5f5;
    border-color: #fbc4be;
    color: #c23934;
}

.jbtn.cancel:hover:not(:disabled) {
    background: #feded8;
    border-color: #dc3545;
}

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

/* ========================================
   WIZARD LAYOUT - Step 1: Selection
   ======================================== */

.compare-header-fixed {
    flex-shrink: 0;
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.compare-header-fixed h1 {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0;
}

.selection-wizard {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    overflow-y: auto;
}

.wizard-content {
    max-width: 900px;
    width: 100%;
}

.wizard-header .wizard-icon {
    font-size: 2.5rem;
    color: #0176d3;
}

.wizard-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
}

.wizard-selection-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: start;
}

.wizard-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: border-color 0.2s ease;
}

.wizard-card:hover {
    border-color: #0176d3;
}

.wizard-card-header {
    background: linear-gradient(135deg, #0176d3 0%, #014486 100%);
    color: white;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
}

.wizard-card-body {
    padding: 1rem;
}

.wizard-vs-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding-top: 3rem;
}

.wizard-vs-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0176d3 0%, #014486 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(1, 118, 211, 0.3);
}

.wizard-vs-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0176d3;
    letter-spacing: 1px;
}

.wizard-action .btn-compare-lg {
    background: linear-gradient(135deg, #0176d3 0%, #014486 100%) !important;
    color: white !important;
    border: none !important;
    padding: 0.8rem 2.75rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 10px rgba(1, 68, 134, 0.3) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    pointer-events: auto !important;
}

.wizard-action .btn-compare-lg:hover:not(:disabled) {
    background: linear-gradient(135deg, #0284e8 0%, #0155a8 100%) !important;
    box-shadow: 0 2px 10px rgba(1, 68, 134, 0.3) !important;
}

.wizard-action .btn-compare-lg:active:not(:disabled) {
    box-shadow: 0 1px 5px rgba(1, 68, 134, 0.25) !important;
}

.wizard-action .btn-compare-lg:disabled {
    background: linear-gradient(135deg, #b0c4d8 0%, #a0b4c8 100%) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    pointer-events: none !important;
}

/* ========================================
   RESULTS VIEW - Step 2: Full Screen
   ======================================== */

.results-view {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.results-tabs-bar {
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 0.75rem;
    padding: 0.4rem 1rem;
}

/* Compact button to match tab size - Slimmer version */
.results-tabs-bar .btn-compact {
    padding: 0.375rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
    text-align: center;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    line-height: 1.2;
}

.results-content-area {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;          /* clips both axes — prevents horizontal blowout */
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    padding: 0.75rem;
    position: relative;
}

/* Schema + Table Structure result cards — fill flex parent and scroll internally */
.result-card-full,
.result-card {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Table selection + data config tabs — overflow scroll */
.data-config-container,
.selection-card-outer {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.result-summary {
    margin-bottom: 2rem;
}

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

.summary-grid-large .summary-item {
    background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.summary-grid-large .summary-item:hover {
    border-color: #0176d3;
    transform: translateY(-2px);
    box-shadow: 0 6 px 12px rgba(1, 118, 211, 0.1);
}

.summary-grid-large .summary-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #0176d3;
    margin-bottom: 0.5rem;
}

.summary-grid-large .summary-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Footer for Results — inline at bottom of flex column, not fixed */
.results-content-area .result-footer,
.result-footer {
    flex-shrink: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0 0;
    border-top: 1px solid #e2e8f0;
    margin-top: auto;
}

/* Responsive */
@media (max-width: 992px) {
    .wizard-selection-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .wizard-vs-divider {
        flex-direction: row;
        padding-top: 0;
    }

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

@media (max-width: 768px) {
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .selection-grid {
        grid-template-columns: 1fr;
    }
    .report-summary-boxes {
        grid-template-columns: repeat(2, 1fr);
    }
    .report-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .job-card-right {
        align-items: flex-start;
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }
    .report-summary-boxes {
        grid-template-columns: 1fr;
    }
    .report-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   REPORT MODAL STYLES
   ======================================== */

.report-meta-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
}

.meta-item label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.25rem;
    letter-spacing: 0.025em;
}

.meta-item span {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.report-summary-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.summary-box {
    background: white;
    padding: 1.25rem;
    border-radius: 8px;
    border-left: 4px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.summary-box.border-danger {
    border-left-color: #ef4444;
}

.summary-box h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: #1e293b;
}

.summary-box label {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    display: block;
}

.report-diff-table-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.audit-report-table {
    margin: 0;
}

.audit-report-table thead th {
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
    padding: 0.75rem 1rem;
}

.audit-report-table tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.report-content {
    max-height: calc(80vh - 120px);
    overflow-y: auto;
}

/* ========================================
   TABLE SELECTION GRIDS
   Used in both Structure and Data Compare tabs
   ======================================== */

/* Structure Tab — table-selection-grid / table-select-item */
.table-selection-grid {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.table-select-item {
    padding: 0.22rem 0.65rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.78rem;
    color: #2d3748;
    transition: background 0.12s ease;
}

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

.table-select-item:hover {
    background: #f7fafc;
}

.table-select-item .form-check {
    margin: 0;
    min-height: 0;
    padding-left: 1.5em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.table-select-item .form-check-label {
    font-size: 0.78rem;
    color: #2d3748;
    cursor: pointer;
    margin: 0;
}

/* Data Compare Tab — data-table-grid / data-table-item */
.data-table-grid {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.data-table-item {
    padding: 0.22rem 0.65rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.78rem;
    color: #2d3748;
    transition: background 0.12s ease;
}

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

.data-table-item:hover {
    background: #f7fafc;
}

.data-table-item.selected {
    background: #eef6ff;
}

.data-table-item .form-check {
    margin: 0;
    min-height: 0;
    padding-left: 1.5em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.data-table-item .form-check-label {
    font-size: 0.78rem;
    color: #2d3748;
    cursor: pointer;
    margin: 0;
}

/* Shared card wrapper used in both tabs */
.selection-card {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    overflow: hidden;
}

/* Step label (Step 1, Step 2) */
.step-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Data config outer wrapper — fills parent and scrolls */
.data-config-container {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
}

/* Drill-down column selector */
.drill-down-content {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
}

/* ========================================
   TABLE ROW ACTION BUTTONS (Columns / Filter)
   ======================================== */

.btn-table-action {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #4a5568;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.btn-table-action:hover {
    background: #e2e8f0;
    color: #2d3748;
}

.btn-table-action.active {
    background: #eef6ff;
    border-color: #3182ce;
    color: #3182ce;
}

.btn-table-action.has-filter {
    border-color: #ed8936;
    color: #c05621;
    background: #fffaf0;
}

.btn-table-action.has-filter.active {
    background: #fff8f0;
    border-color: #dd6b20;
    color: #c05621;
}

/* ── Latest Version dedup panel ──────────────────────────────────────────── */
.version-dedup-panel {
    border-left: 3px solid #7c3aed;
    background: #faf5ff;
}
.vd-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: #5b21b6;
    margin-bottom: 0.6rem;
}
.vd-hint {
    font-size: 0.7rem;
    color: #7c3aed;
    font-weight: 400;
    margin-left: 0.25rem;
}
.vd-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.35rem 0.6rem;
    align-items: center;
}
.vd-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #4b5563;
}
.vd-optional {
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.68rem;
}
.vd-select, .vd-input {
    font-size: 0.75rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid #d8b4fe;
    border-radius: 4px;
    background: #fff;
    color: #1e293b;
    width: 100%;
}
.vd-select:focus, .vd-input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px #ede9fe;
}

/* Active filter / column count badges */
.badge-filter-active {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 20px;
    background: #fff3e0;
    color: #c05621;
    border: 1px solid #fed7aa;
}

.badge-col-active {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 20px;
    background: #e8f4fd;
    color: #2b6cb0;
    border: 1px solid #bee3f8;
}

/* ── Floating job-queued pill ───────────────────────────────────────────── */
@keyframes jobBannerIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Schema Compare Results  (.scr-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.scr-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    font-size: 0.8rem;
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.scr-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.scr-env { display: flex; align-items: center; gap: 0.4rem; }

.scr-pill {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
}
.scr-pill-src { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.scr-pill-tgt { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.scr-arrow    { color: #94a3b8; font-size: 0.7rem; }
.scr-mode-chip {
    margin-left: 0.4rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.scr-stats { display: flex; gap: 1.4rem; align-items: center; }
.scr-stat  { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.scr-stat-val { font-size: 0.9rem; font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; }
.scr-stat-lbl { font-size: 0.63rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.scr-stat-sync .scr-stat-val { color: #1d4ed8; }
.scr-stat-src  .scr-stat-val { color: #059669; }
.scr-stat-tgt  .scr-stat-val { color: #dc2626; }

/* ── Scrollable body ──────────────────────────────────────────────────────── */
.scr-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    padding: 0.5rem 0.65rem;
}

/* ── Section block ────────────────────────────────────────────────────────── */
.scr-section {
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
}

.scr-section-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
}

.scr-hdr-src    { background: #f0fdf4; color: #15803d; border-bottom-color: #bbf7d0; }
.scr-hdr-tgt    { background: #fff5f5; color: #dc2626; border-bottom-color: #fecaca; }
.scr-hdr-common { background: #eff6ff; color: #1d4ed8; border-bottom-color: #bfdbfe; }

.scr-count {
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(0,0,0,0.07);
}

/* ── Tag cloud ────────────────────────────────────────────────────────────── */
.scr-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.45rem 0.65rem;
}

.scr-none {
    font-size: 0.74rem;
    color: #94a3b8;
    font-style: italic;
}

.scr-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.71rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

.scr-tag-src    { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.scr-tag-tgt    { background: #fff5f5; color: #dc2626; border: 1px solid #fecaca; }
.scr-tag-common { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

.scr-show-more {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: 0.71rem;
    font-weight: 600;
    color: #1d4ed8;
    background: transparent;
    border: 1px dashed #bfdbfe;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s;
}
.scr-show-more:hover { background: #eff6ff; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.scr-footer {
    display: flex;
    align-items: center;
    padding: 0.35rem 0 0;
    flex-shrink: 0;
    border-top: 1px solid #e2e8f0;
}

.scr-back-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
}
.scr-back-btn:hover { background: #f1f5f9; }

/* ═══════════════════════════════════════════════════════════════════════════
   Table Structure Results  (.tsr-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.tsr-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    font-size: 0.8rem;
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.tsr-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.tsr-env { display: flex; align-items: center; gap: 0.4rem; }

.tsr-pill {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
}
.tsr-pill-src { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.tsr-pill-tgt { background:#e0e7ff; color:#3730a3; border:1px solid #c7d2fe; }
.tsr-arrow { color:#94a3b8; font-size:0.7rem; }
.tsr-mode-chip {
    margin-left:0.4rem;
    padding:0.15rem 0.5rem;
    border-radius:4px;
    font-size:0.68rem;
    font-weight:600;
    background:#f1f5f9;
    color:#64748b;
    border:1px solid #e2e8f0;
}

.tsr-stats { display:flex; gap:1.25rem; align-items:center; }
.tsr-stat  { display:flex; flex-direction:column; align-items:center; line-height:1.2; }
.tsr-stat-val { font-size:0.9rem; font-weight:700; color:#1e293b; font-variant-numeric:tabular-nums; }
.tsr-stat-lbl { font-size:0.63rem; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:0.04em; }
.tsr-stat-drift .tsr-stat-val { color:#c2410c; }
.tsr-stat-sync  .tsr-stat-val { color:#1d4ed8; }

/* ── Table wrap ───────────────────────────────────────────────────────────── */
.tsr-table-wrap {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

/* ── Column grid: icon | name | status | cols | drifted ──────────────────── */
.tsr-thead,
.tsr-row {
    display: grid;
    grid-template-columns: 28px 1fr 80px 70px 90px;
    align-items: center;
}

.tsr-thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f1f5f9;
    border-bottom: 2px solid #e2e8f0;
}

.tsr-th {
    padding: 0.4rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ── Rows ─────────────────────────────────────────────────────────────────── */
.tsr-row {
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    min-height: 34px;
    transition: background 0.1s;
}
.tsr-row:hover { background: #f0f6ff; }
.tsr-row-drift { border-left: 3px solid #f59e0b; }
.tsr-row-sync  { border-left: 3px solid #1d4ed8; }

/* ── Cells ────────────────────────────────────────────────────────────────── */
.tsr-col-icon   { text-align:center; padding:0 4px; }
.tsr-col-name   { padding:0.35rem 0.5rem; overflow:hidden; }
.tsr-col-status { padding:0.35rem 0.5rem; }
.tsr-col-cols,
.tsr-col-drift  { padding:0.35rem 0.5rem; text-align:right; }

.tsr-chevron { color:#94a3b8; font-size:0.65rem; }

.tsr-name-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsr-badge {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.tsr-badge-sync  { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.tsr-badge-drift { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }

.tsr-num       { font-size:0.75rem; font-weight:600; font-variant-numeric:tabular-nums; color:#475569; }
.tsr-num-zero  { color:#cbd5e1; font-weight:400; }
.tsr-num-drift { color:#c2410c; font-weight:700; }

/* ── Expanded column diff panel ───────────────────────────────────────────── */
.tsr-expand {
    border-bottom: 1px solid #e2e8f0;
    background: #fafbfc;
    border-left: 3px solid #f59e0b;
}

/* inner column grid: col-name | source | target | status */
.tsr-col-thead,
.tsr-col-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1.6fr 90px;
    align-items: center;
}

.tsr-col-thead {
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
}

.tsr-col-th {
    padding: 0.3rem 0.6rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tsr-col-row {
    border-bottom: 1px solid #f1f5f9;
    min-height: 30px;
}
.tsr-col-row:last-child { border-bottom: none; }
.tsr-col-drifted { background: #fffbf5; }
.tsr-col-drifted:hover { background: #fff3e0; }

.tsr-col-cell { padding: 0.28rem 0.6rem; }

.tsr-col-name-text {
    font-size: 0.74rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsr-col-detail {
    font-size: 0.72rem;
    color: #475569;
    font-family: ui-monospace, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsr-col-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.63rem;
    font-weight: 700;
    white-space: nowrap;
}
.tsr-col-badge-identical { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.tsr-col-badge-added     { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.tsr-col-badge-removed   { background:#fff5f5; color:#dc2626; border:1px solid #fecaca; }
.tsr-col-badge-modified  { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.tsr-footer {
    display: flex;
    align-items: center;
    padding: 0.35rem 0 0;
    flex-shrink: 0;
    border-top: 1px solid #e2e8f0;
    margin-top: 0;
}

.tsr-back-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
}
.tsr-back-btn:hover { background: #f1f5f9; }

/* ═══════════════════════════════════════════════════════════════════════════
   Active Jobs Panel  (.aj-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Empty state ─────────────────────────────────────────────────────────── */
.aj-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1rem;
    color: #94a3b8;
    text-align: center;
}

/* ── Active Jobs page body — fills remaining height ──────────────────────── */
.active-jobs-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0 0;
}

/* ── Outer scroll container ──────────────────────────────────────────────── */
.aj-scroll-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

/* ── Header bar ──────────────────────────────────────────────────────────── */
.aj-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem 0.65rem 0.9rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
}

.aj-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.aj-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.aj-badge-running {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    animation: aj-pulse 2s infinite;
}

.aj-badge-dim {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

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

/* ── New Compare button ──────────────────────────────────────────────────── */
.aj-btn-new {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: #1d4ed8;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.aj-btn-new:hover { background: #1e40af; }

.aj-btn-validation             { background: #0f766e; }
.aj-btn-validation:hover       { background: #0d6460; }

/* ── Table wrapper — this is the scroll area ─────────────────────────────── */
.aj-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1 1 0;          /* shrink to fit parent, not content */
    min-height: 0;        /* required for flex children to scroll */
}

.aj-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    table-layout: fixed;
}

/* ── Table head (sticky inside the scroll area) ──────────────────────────── */
.aj-table thead tr {
    background: #f1f5f9;
    position: sticky;
    top: 0;
    z-index: 2;
}

.aj-table thead th {
    padding: 0 12px;
    height: 30px;
    text-align: left;
    font-size: 0.675rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    vertical-align: middle;
}

/* ── Table rows ──────────────────────────────────────────────────────────── */
.aj-row td {
    padding: 0 12px;
    height: 36px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #fff;
    transition: background 0.1s;
}

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

.aj-row:hover td { background: #f0f6ff !important; }

/* "mine" — blue left accent on icon cell */
.aj-row.aj-mine td:first-child {
    box-shadow: inset 3px 0 0 #3b82f6;
}

/* Running row — very subtle blue tint */
.aj-row.aj-row-running td { background: #f5f9ff; }

/* Succeeded — plain white (no green) */
.aj-row.aj-row-succeeded td { background: #fff; }

/* Failed — very faint red */
.aj-row.aj-row-failed td { background: #fffbfb; }

/* Cancelled — faded */
.aj-row.aj-row-cancelled td {
    background: #fafafa;
    opacity: 0.75;
}

/* ── Status icon cell ────────────────────────────────────────────────────── */
.aj-td-icon { text-align: center; }

.aj-spinner      { color: #3b82f6; font-size: 0.85rem; }
.aj-icon-success { color: #1d4ed8; font-size: 0.85rem; }
.aj-icon-fail    { color: #dc2626; font-size: 0.85rem; }
.aj-icon-cancel  { color: #9ca3af; font-size: 0.85rem; }
.aj-icon-queue   { color: #f59e0b; font-size: 0.85rem; }

/* ── Environments cell ───────────────────────────────────────────────────── */
.aj-td-env { min-width: 0; }

.aj-env-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow: hidden;
}

.aj-pill {
    display: inline-block;
    padding: 0.08rem 0.45rem;
    border-radius: 4px;
    font-size: 0.69rem;
    font-weight: 700;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}

/* Both pills blue-family — consistent with app brand */
.aj-pill-src {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.aj-pill-tgt {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.aj-arrow {
    color: #94a3b8;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.aj-mine-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
    margin-left: 2px;
}

.aj-sub-text {
    margin-top: 0.1rem;
    font-size: 0.65rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aj-sub-text.muted { color: #94a3b8; }

/* ── Error toggle ────────────────────────────────────────────────────────── */
.aj-err-toggle {
    display: inline-flex;
    align-items: center;
    margin-top: 0.22rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    color: #dc2626;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Type chip ───────────────────────────────────────────────────────────── */
.aj-type-chip {
    display: inline-block;
    padding: 0.08rem 0.45rem;
    border-radius: 4px;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.6;
}

.aj-type-schema         { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.aj-type-tablestructure { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.aj-type-data           { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.aj-type-full           { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.aj-type-validation     { background: #fefce8; color: #854d0e; border: 1px solid #fde68a; }
.aj-type-function       { background: #fdf2f8; color: #9d174d; border: 1px solid #fbcfe8; }
.aj-type-view           { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* ── Progress cell ───────────────────────────────────────────────────────── */
.aj-td-prog { min-width: 0; }

.aj-prog-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.aj-prog-track {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    min-width: 60px;
}

.aj-prog-fill {
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.aj-prog-fill.aj-prog-queued {
    background: linear-gradient(90deg, #fbbf24, #d97706);
    animation: aj-queued-shimmer 1.5s infinite;
}

@keyframes aj-queued-shimmer {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.aj-prog-pct {
    font-size: 0.7rem;
    font-weight: 700;
    color: #1d4ed8;
    white-space: nowrap;
    min-width: 30px;
    text-align: right;
}

/* ── Status text (terminal rows) ─────────────────────────────────────────── */
.aj-status-text {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aj-status-succeeded { color: #1d4ed8; }   /* blue — consistent with brand */
.aj-status-failed    { color: #dc2626; }
.aj-status-cancelled { color: #94a3b8; }

/* ── Time columns ────────────────────────────────────────────────────────── */
.aj-td-time {
    color: #475569;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Actions column ──────────────────────────────────────────────────────── */
.aj-td-actions {
    text-align: right;
    white-space: nowrap;
    padding-right: 0.85rem !important;
}

.aj-act {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    margin-left: 4px;
    white-space: nowrap;
}

.aj-act:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* View Results — solid blue */
.aj-act-view {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
    box-shadow: 0 1px 4px rgba(29,78,216,0.25);
}
.aj-act-view:hover:not(:disabled) {
    background: #1e40af;
    box-shadow: 0 2px 8px rgba(29,78,216,0.35);
}

/* Retry — amber outline */
.aj-act-retry {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}
.aj-act-retry:hover:not(:disabled) {
    background: #ffedd5;
    border-color: #fb923c;
}

/* Cancel — soft red outline */
.aj-act-cancel {
    background: #fff5f5;
    color: #dc2626;
    border-color: #fecaca;
}
.aj-act-cancel:hover:not(:disabled) {
    background: #fee2e2;
    border-color: #f87171;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Data Compare Results  (.dcr-*)  — global so FCR / VCR inherit these styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper — fills the flex column parent (.results-content-area) */
.dcr-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    font-size: 0.8rem;
}

/* Top bar */
.dcr-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.dcr-env  { display: flex; align-items: center; gap: 0.4rem; }
.dcr-pill { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 5px; font-size: 0.72rem; font-weight: 700; }
.dcr-pill-src { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.dcr-pill-tgt { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.dcr-arrow { color: #94a3b8; font-size: 0.7rem; }
.dcr-mode-chip { margin-left: 0.4rem; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.68rem; font-weight: 600; background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

.dcr-stats { display: flex; gap: 1.25rem; align-items: center; }
.dcr-stat  { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.dcr-stat-val { font-size: 0.9rem; font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; }
.dcr-stat-lbl { font-size: 0.63rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.dcr-stat-drift    .dcr-stat-val { color: #c2410c; }
.dcr-stat-extra    .dcr-stat-val { color: #dc2626; }
.dcr-stat-modified .dcr-stat-val { color: #0369a1; }
.dcr-stat-sync     .dcr-stat-val { color: #1d4ed8; }
.dcr-stat-error    .dcr-stat-val { color: #991b1b; }

/* Scrollable table area */
.dcr-table-wrap {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

/* Column grid (DCR — overridden by fcr-thead / vcr-thead) */
.dcr-thead, .dcr-row {
    display: grid;
    grid-template-columns: 28px 1fr 80px 80px 80px 72px 72px 72px;
    align-items: center;
}
.dcr-thead {
    position: sticky; top: 0; z-index: 2;
    background: #f1f5f9;
    border-bottom: 2px solid #e2e8f0;
}
.dcr-th {
    padding: 0.4rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Row */
.dcr-row {
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
    min-height: 34px;
}
.dcr-row:last-child { border-bottom: none; }
.dcr-row:hover { background: #f0f6ff; }
.dcr-row-drift { border-left: 3px solid #f59e0b; }
.dcr-row-sync  { border-left: 3px solid #1d4ed8; }
.dcr-row-error { border-left: 3px solid #dc2626; background: #fff8f8; }
.dcr-row-error:hover { background: #fef2f2; }

/* Cells */
.dcr-col-icon   { text-align: center; padding: 0 4px; }
.dcr-col-name   { padding: 0.35rem 0.5rem; overflow: hidden; }
.dcr-col-status { padding: 0.35rem 0.5rem; }
.dcr-col-count  { padding: 0.35rem 0.5rem; text-align: right; }
.dcr-chevron { color: #94a3b8; font-size: 0.65rem; }
.dcr-name-text { font-size: 0.78rem; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Status badge */
.dcr-badge { display: inline-block; padding: 0.12rem 0.45rem; border-radius: 4px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.dcr-badge-sync  { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.dcr-badge-drift { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.dcr-badge-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; cursor: help; }

/* Count numbers */
.dcr-num         { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #475569; }
.dcr-num-zero    { color: #cbd5e1; font-weight: 400; }
.dcr-num-warn    { color: #c2410c; font-weight: 700; }
.dcr-num-danger  { color: #dc2626; font-weight: 700; }
.dcr-num-info    { color: #0369a1; font-weight: 700; }

/* Row wrapper */
.dcr-tbody, .dcr-row-wrap { min-width: 0; width: 100%; }

/* Expanded panel */
.dcr-expand {
    padding: 0.6rem 0.75rem 0.6rem 2rem;
    font-size: 0.75rem;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-left: 3px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Info note */
.dcr-info-note {
    font-size: 0.72rem; color: #64748b;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 5px;
    padding: 0.3rem 0.7rem; display: inline-flex; align-items: center;
}
.dcr-info-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; flex-direction: column; align-items: flex-start; }

/* Section headers */
.dcr-section-header {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; font-weight: 700;
    padding: 0.25rem 0.5rem; border-radius: 5px;
    margin-top: 0.25rem; letter-spacing: 0.01em;
}
.dcr-section-note { font-weight: 400; color: #94a3b8; font-size: 0.67rem; margin-left: 0.25rem; }
.dcr-section-missing  { background: #fff7ed; color: #c2410c; border-left: 3px solid #f97316; }
.dcr-section-extra    { background: #fef2f2; color: #dc2626; border-left: 3px solid #ef4444; }
.dcr-section-modified { background: #eff6ff; color: #1d4ed8; border-left: 3px solid #3b82f6; }
.dcr-section-identical{ background: #f0fdf4; color: #15803d; border-left: 3px solid #22c55e; }

/* Detail table */
.dcr-detail-table { border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; background: #fff; width: 100%; margin-bottom: 0.25rem; }
.dcr-detail-thead { display: grid; background: #f1f5f9; border-bottom: 2px solid #e2e8f0; padding: 0.28rem 0.5rem; }
.dcr-dth { font-size: 0.64rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0.25rem; }

.dcr-detail-row {
    display: grid; border-bottom: 1px solid #f1f5f9;
    padding: 0.25rem 0.5rem; align-items: start; min-height: 26px;
}
.dcr-detail-row:last-child { border-bottom: none; }
.dcr-detail-row:hover { background: #f8fafc; }

.dcr-dkey { font-family: ui-monospace, monospace; font-size: 0.69rem; color: #475569; font-weight: 600; word-break: break-all; padding-right: 0.5rem; }
.dcr-dval { font-family: ui-monospace, monospace; font-size: 0.69rem; word-break: break-word; padding: 0 0.25rem; }

/* DiffPlex inline diff */
.dcr-diff-cell { font-family: ui-monospace, monospace; font-size: 0.69rem; word-break: break-word; padding: 1px 4px; display: block; }
.dcr-diff-line { display: block; white-space: pre-wrap; word-break: break-word; line-height: 1.55; min-height: 1em; }
.dcr-diff-del      { background: #fee2e2; color: #991b1b; border-radius: 2px; padding: 0 2px; white-space: pre-wrap; }
.dcr-diff-ins      { background: #dcfce7; color: #166534; border-radius: 2px; padding: 0 2px; white-space: pre-wrap; }
.dcr-diff-unch     { color: #475569; white-space: pre-wrap; }
.dcr-diff-del-char { background: #fecaca; color: #991b1b; border-radius: 2px; padding: 0 1px; white-space: pre; font-weight: 600; }
.dcr-diff-ins-char { background: #bbf7d0; color: #166534; border-radius: 2px; padding: 0 1px; white-space: pre; font-weight: 600; }
.dcr-row-changed   { background: #fffbeb !important; }

/* Modified group */
.dcr-mod-group { margin-bottom: 0.4rem; }
.dcr-mod-pk { font-family: ui-monospace, monospace; font-size: 0.69rem; color: #4c1d95; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 4px 4px 0 0; padding: 0.2rem 0.5rem; font-weight: 600; }
.dcr-mod-group .dcr-detail-table { border-radius: 0 0 6px 6px; border-top: none; }

/* Expand spinner */
.dcr-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #cbd5e1; border-top-color: #3b82f6; border-radius: 50%; animation: dcr-spin 0.6s linear infinite; }
@keyframes dcr-spin { to { transform: rotate(360deg); } }

/* Extra row color (used by FCR/VCR) */
.dcr-row-extra { border-left: 3px solid #ef4444; }

/* Footer — pinned */
.dcr-footer {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    gap: 0.5rem;
    background: #fff;
    border-top: 2px solid #e2e8f0;
}
.dcr-back-btn { display: inline-flex; align-items: center; padding: 0.28rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: #475569; background: transparent; border: 1px solid #e2e8f0; border-radius: 5px; cursor: pointer; transition: background 0.15s; }
.dcr-back-btn:hover { background: #f1f5f9; }

/* Empty state */
.dcr-empty-state { padding: 2.5rem; text-align: center; color: #94a3b8; font-size: 0.8rem; }

/* ── Shared export button group (used in all result footers) ─────────────── */
.dcr-export-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dcr-export-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dcr-export-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.26rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.dcr-export-html { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.dcr-export-html:hover { background: #dbeafe; }
.dcr-export-csv  { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.dcr-export-csv:hover  { background: #dcfce7; }
.dcr-export-json { color: #374151; background: #f9fafb; border-color: #d1d5db; }
.dcr-export-json:hover { background: #f3f4f6; }

/* ── Object Compare Results (Functions / Views) ─────────────────────────── */
.ocr-wrap { display: flex; flex-direction: column; gap: 0.75rem; }

.ocr-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ocr-search { max-width: 320px; }
.ocr-status-filters { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.ocr-status-btn { font-size: 0.75rem; padding: 0.2rem 0.6rem; }

/* thead columns */
.ocr-thead {
    display: grid;
    grid-template-columns: 130px 1fr 220px 100px 40px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px 6px 0 0;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ocr-th { padding: 0 0.25rem; }

/* view thead (no signature column) */
.ocr-thead.ocr-view-thead {
    grid-template-columns: 130px 1fr 100px 40px;
}

/* row columns */
.dcr-row .ocr-col-schema,
.dcr-row .ocr-col-name,
.dcr-row .ocr-col-sig,
.dcr-row .ocr-col-name-wide,
.dcr-row .ocr-col-status,
.dcr-row .ocr-col-action {
    display: flex;
    align-items: center;
    padding: 0 0.25rem;
    overflow: hidden;
}

/* Make dcr-row use grid for ocr columns when inside ocr-wrap */
.ocr-wrap .dcr-row {
    display: grid;
    grid-template-columns: 130px 1fr 220px 100px 40px;
}
.ocr-wrap.ocr-view-wrap .dcr-row {
    grid-template-columns: 130px 1fr 100px 40px;
}

/* extra status row color (not in original dcr) */
.dcr-row-extra { background: #fefce8; border-left: 3px solid #eab308; }
.dcr-row-extra:hover { background: #fef9c3; }

/* side-by-side diff panel */
.ocr-diff-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid #e2e8f0;
    background: #fafafa;
}
.ocr-diff-col { padding: 0.5rem 0.75rem; }
.ocr-diff-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 0.35rem;
}
.text-source { color: #2563eb; }
.text-target { color: #16a34a; }
.ocr-def-pre {
    font-family: 'Consolas', 'Cascadia Code', monospace;
    font-size: 0.72rem;
    white-space: pre-wrap;
    word-break: break-all;
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}

/* schema selector for object compare */
.ocr-schema-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.ocr-schema-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.ocr-schema-chip.selected {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.ocr-schema-chip:hover:not(.selected) { background: #e2e8f0; }

/* ========================================
   Object Compare Config Panel (occ-*) — compact single-screen layout
   ======================================== */
.occ-panel {
    padding: 0.75rem 1rem;
    gap: 0.6rem;
}

.occ-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.occ-section-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.occ-section-icon {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.occ-step-badge {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #1e40af, #2563eb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.occ-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.1;
}

.occ-section-sub {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 0.05rem;
}

/* --- Compare Type Cards — horizontal row --- */
.occ-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.occ-type-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.occ-type-card:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(37,99,235,0.08);
}

.occ-type-card.occ-active {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 2px 10px rgba(37,99,235,0.14);
}

.occ-type-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background: #e2e8f0;
    color: #475569;
    flex-shrink: 0;
    transition: all 0.15s;
}

.occ-icon-tables    { background: #fef3c7; color: #d97706; }
.occ-icon-functions { background: #fce7f3; color: #db2777; }
.occ-icon-views     { background: #d1fae5; color: #059669; }

.occ-active .occ-icon-tables    { background: #fde68a; }
.occ-active .occ-icon-functions { background: #fbcfe8; }
.occ-active .occ-icon-views     { background: #a7f3d0; }

.occ-type-text { flex: 1; min-width: 0; }

.occ-type-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}

.occ-type-desc {
    font-size: 0.67rem;
    color: #64748b;
    line-height: 1.3;
    margin-top: 0.05rem;
}

.occ-check {
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    color: #2563eb;
    font-size: 0.75rem;
    line-height: 1;
}

/* --- Schema Chips --- */
.occ-schema-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.occ-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    font-size: 0.74rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.13s;
    user-select: none;
}

.occ-chip:hover:not(.occ-chip-on) {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #2563eb;
}

.occ-chip.occ-chip-on {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 1px 4px rgba(37,99,235,0.3);
}

.occ-loading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #64748b;
    font-size: 0.76rem;
}

.occ-empty-hint {
    font-size: 0.74rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* --- Depth Cards --- */
.occ-depth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.occ-depth-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    position: relative;
}

.occ-depth-card:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.occ-depth-card.occ-active {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 2px 8px rgba(37,99,235,0.12);
}

.occ-depth-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.occ-icon-exist {
    background: #fef9c3;
    color: #ca8a04;
}

.occ-depth-body { flex: 1; min-width: 0; }

.occ-depth-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.occ-recommended {
    font-size: 0.62rem;
    font-weight: 600;
    background: #dcfce7;
    color: #16a34a;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.occ-depth-desc {
    font-size: 0.68rem;
    color: #64748b;
    margin-top: 0.1rem;
    line-height: 1.3;
}

/* --- Tables empty state --- */
.occ-tables-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.25rem 1rem;
    color: #94a3b8;
    text-align: center;
}

.occ-tables-empty i {
    font-size: 2rem;
    opacity: 0.3;
}

.occ-te-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}

.occ-te-sub {
    font-size: 0.74rem;
    color: #94a3b8;
    max-width: 300px;
    line-height: 1.4;
}