/* CodeIQ review UI - Apple-inspired refinement */

/* Global CodeIQ UI - Editorial refinement */
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #faf8f5;
    color: #1a1a1a;
}

body.splash-active {
    background: #fdf5f7;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

#codeiq-app,
.codeiq-dashboard {
    --app-bg: #faf8f5;
    --app-surface: #ffffff;
    --app-surface-2: #faf8f5;
    --app-surface-3: #f5f2ed;
    --app-border: #d4d0c8;
    --app-border-strong: #c4c0b8;
    --app-text: #1a1a1a;
    --app-muted: #6b6b6b;
    --app-accent: #c4576a;
    --app-magenta: #c4576a;
    --app-success: #0f8a5f;
    --app-warning: #b45309;
    --app-danger: #dc2626;
    --app-info: #5b6eae;
    --app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --app-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --app-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --app-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --app-radius-sm: 4px;
    --app-radius-md: 4px;
    --app-radius-lg: 8px;
    --app-radius-xl: 8px;
    --app-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --app-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --app-font-mono: 'JetBrains Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;

    --bg-primary: var(--app-bg);
    --bg-secondary: var(--app-surface);
    --bg-tertiary: var(--app-surface-2);
    --bg-overlay: rgba(26, 26, 26, 0.45);
    --bg-gradient: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%);

    --text-primary: var(--app-text);
    --text-secondary: var(--app-muted);
    --text-tertiary: #999999;

    --border-light: var(--app-border);
    --border-medium: var(--app-border-strong);
    --border-dark: #b4b0a8;

    --shadow-sm: var(--app-shadow-xs);
    --shadow-md: var(--app-shadow-sm);
    --shadow-lg: var(--app-shadow-md);
    --shadow-xl: var(--app-shadow-lg);

    --radius-sm: 4px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --radius-2xl: 8px;

    --primary-50: #fdf5f7;
    --primary-100: #fae8ec;
    --primary-200: #f5d0d9;
    --primary-300: #e8a8b8;
    --primary-400: #d4899a;
    --primary-500: #c4576a;
    --primary-600: #9a4054;
    --primary-700: #7a3345;
    --primary-800: #5a2535;
    --primary-900: #3a1825;

    --magenta-500: #c4576a;
    --magenta-600: #9a4054;

    --success-100: #dcfce7;
    --success-400: #22c55e;
    --success-700: #047857;
    --warning-100: #fef3c7;
    --warning-500: #d97706;
    --error-100: #fee2e2;
    --error-500: #dc2626;

    --font-mono: var(--app-font-mono);
    font-family: var(--app-font);
    color: var(--app-text);
}

#codeiq-app {
    background: var(--bg-gradient);
}

.codeiq-dashboard {
    background: var(--bg-gradient);
}

.codeiq-dashboard::before {
    display: none;
}

/* Tab system */
.codeiq-dashboard .tab-bar {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--app-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    min-height: 72px;
    backdrop-filter: blur(18px);
}

.codeiq-dashboard .codeiq-brand {
    min-width: 240px;
    padding: 10px 20px;
    border-right: 1px solid var(--app-border);
}

.codeiq-dashboard .codeiq-logo {
    height: 44px;
    max-width: 200px;
}

.codeiq-dashboard .tabs-container {
    gap: 8px;
    padding: 8px 8px;
}

.codeiq-dashboard .tab {
    background: var(--app-surface-2);
    border-radius: 14px;
    border: 1px solid transparent;
    margin: 6px 6px;
    min-width: 180px;
    max-width: 240px;
    padding: 10px 12px;
    box-shadow: none;
}

.codeiq-dashboard .tab:hover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: var(--app-shadow-xs);
}

.codeiq-dashboard .tab.active {
    background: #ffffff;
    border-color: rgba(154, 64, 84, 0.25);
    box-shadow: var(--app-shadow-sm);
}

.codeiq-dashboard .tab.active::after {
    display: none;
}

.codeiq-dashboard .tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--app-muted);
}

.codeiq-dashboard .tab-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text);
}

.codeiq-dashboard .tab-subtitle {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.codeiq-dashboard .tab-status {
    gap: 6px;
}

.codeiq-dashboard .status-indicator {
    width: 7px;
    height: 7px;
}

.codeiq-dashboard .tab-progress-indicator {
    margin-left: 4px;
}

.codeiq-dashboard .progress-circle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid var(--app-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.codeiq-dashboard .circular-chart {
    width: 26px;
    height: 26px;
}

.codeiq-dashboard .circular-chart .circle-bg {
    stroke: #d4d0c8;
    stroke-width: 3;
    fill: none;
}

.codeiq-dashboard .circular-chart .circle {
    stroke: var(--app-accent);
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
}

.codeiq-dashboard .progress-text-percent {
    position: absolute;
    font-size: 9px;
    font-weight: 700;
    color: var(--app-accent);
}

.codeiq-dashboard .tab-close {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #94a3b8;
    font-size: 16px;
}

.codeiq-dashboard .tab:hover .tab-close {
    opacity: 1;
}

.codeiq-dashboard .tab-close:hover {
    border-color: var(--app-border);
    background: var(--app-surface-2);
    color: var(--app-text);
}

.codeiq-dashboard .tab-controls {
    gap: 12px;
}

.codeiq-dashboard .back-to-dashboard-btn {
    border-radius: 999px;
    padding: 8px 14px;
    border: 1px solid var(--app-border);
    background: #ffffff;
    color: var(--app-text);
    box-shadow: var(--app-shadow-xs);
}

.codeiq-dashboard .user-menu-btn {
    border-radius: 999px;
    padding: 8px 14px;
    border: 1px solid var(--app-border);
    background: #ffffff;
    color: var(--app-text);
    box-shadow: var(--app-shadow-xs);
    font-weight: 600;
}

.codeiq-dashboard .user-menu-btn .dropdown-arrow {
    font-size: 10px;
    color: var(--text-tertiary);
}

.codeiq-dashboard .user-menu-dropdown {
    border-radius: 12px;
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-md);
    background: #ffffff;
}

.codeiq-dashboard .menu-item {
    border-radius: 10px;
    margin: 4px 6px;
}

.codeiq-dashboard .menu-item:hover {
    background: var(--app-surface-2);
    color: var(--app-accent);
}

/* Hide old floating credits widget - replaced by horizontal credits bar */
.codeiq-dashboard .credits-widget.floating-widget {
    display: none !important;
}

.codeiq-dashboard .credits-widget {
    border-radius: 14px;
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--app-shadow-sm);
    backdrop-filter: blur(12px);
}

.codeiq-dashboard .credits-popover {
    border-radius: 16px;
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-md);
}

.codeiq-dashboard .credits-progress-bar {
    background: var(--app-surface-3);
    border-radius: 999px;
    overflow: hidden;
}

.codeiq-dashboard .credits-progress-bar .progress-label {
    font-size: 11px;
    color: var(--text-tertiary);
}

.codeiq-dashboard .btn-buy-credits {
    border-radius: 10px;
    background: linear-gradient(135deg, var(--app-accent), var(--app-magenta));
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    font-weight: 600;
}

.codeiq-dashboard .popover-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.codeiq-dashboard .subscribe-upsell-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #7c3aed;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(196, 87, 106, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.codeiq-dashboard .subscribe-upsell-link:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(196, 87, 106, 0.2));
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-1px);
}

.codeiq-dashboard .subscribe-upsell-link span {
    background: linear-gradient(135deg, #7c3aed, #db2777);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.codeiq-dashboard .subscribe-upsell-link svg {
    color: #7c3aed;
}

/* ==================== CREDITS STATUS BAR ==================== */

.codeiq-credits-bar {
    background: linear-gradient(135deg, rgba(250, 248, 245, 0.95) 0%, rgba(245, 242, 237, 0.9) 50%, rgba(253, 245, 247, 0.9) 100%);
    border: 1px solid rgba(196, 87, 106, 0.15);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(154, 64, 84, 0.06);
}

.credits-bar-content {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.credits-bar-progress {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.credits-bar-track {
    height: 8px;
    background: rgba(154, 64, 84, 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.credits-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #c4576a, #c4576a);
    border-radius: 999px;
    transition: width 0.5s ease, background 0.3s ease;
}

.credits-bar-text {
    font-size: 11px;
    font-weight: 600;
    color: #9a4054;
    letter-spacing: 0.02em;
}

.credits-bar-info {
    display: flex;
    gap: 20px;
}

.credits-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.credits-bar-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b6b6b;
}

.credits-bar-value {
    font-size: 16px;
    font-weight: 700;
    color: #9a4054;
}

.credits-bar-value.bonus {
    color: #7c3aed;
}

.credits-bar-value.available {
    color: #c4576a;
}

.credits-bar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.credits-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.credits-bar-btn.buy {
    background: linear-gradient(135deg, #c4576a, #c4576a);
    color: white;
    box-shadow: 0 2px 8px rgba(196, 87, 106, 0.3);
}

.credits-bar-btn.buy:hover {
    box-shadow: 0 4px 12px rgba(196, 87, 106, 0.4);
    transform: translateY(-1px);
}

.credits-bar-btn.subscribe {
    background: linear-gradient(135deg, rgba(154, 64, 84, 0.1), rgba(219, 39, 119, 0.1));
    border: 1px solid rgba(154, 64, 84, 0.3);
    color: #7c3aed;
}

.credits-bar-btn.subscribe:hover {
    background: linear-gradient(135deg, rgba(154, 64, 84, 0.15), rgba(219, 39, 119, 0.15));
    border-color: rgba(154, 64, 84, 0.5);
    transform: translateY(-1px);
}

/* Responsive adjustments for credits bar */
@media (max-width: 768px) {
    .credits-bar-content {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .credits-bar-info {
        justify-content: space-around;
    }

    .credits-bar-actions {
        justify-content: center;
    }
}

/* Tab content and session layout */
.codeiq-dashboard .tab-content {
    padding: 24px 24px 48px;
    background: transparent;
}

.codeiq-dashboard .session-content:not(.review-interface) {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 8px 32px;
}

.codeiq-dashboard .session-header {
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.codeiq-dashboard .session-header h2 {
    font-size: 22px;
    font-weight: 700;
}

.codeiq-dashboard .session-status {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.codeiq-dashboard .session-status.ready {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.3);
}

.codeiq-dashboard .session-status.error {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.3);
}

.codeiq-dashboard .session-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.codeiq-dashboard .stat-card {
    background: #ffffff;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--app-shadow-xs);
}

.codeiq-dashboard .stat-card::before {
    display: none;
}

.codeiq-dashboard .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-sm);
}

.codeiq-dashboard .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--app-text);
    background: none;
    -webkit-text-fill-color: unset;
}

.codeiq-dashboard .stat-label {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.codeiq-dashboard .action-btn {
    border-radius: 12px;
    font-weight: 600;
    padding: 10px 16px;
    min-width: 140px;
}

.codeiq-dashboard .action-btn.primary {
    background: linear-gradient(135deg, var(--app-accent), var(--app-magenta));
    border: none;
    color: #ffffff;
}

.codeiq-dashboard .action-btn.secondary {
    background: #ffffff;
    border: 1px solid var(--app-border);
    color: var(--app-text);
}

.codeiq-dashboard .action-btn.primary:hover,
.codeiq-dashboard .action-btn.secondary:hover {
    transform: translateY(-1px);
    box-shadow: var(--app-shadow-sm);
}

/* Upload sections */
.codeiq-dashboard .upload-section {
    background: #ffffff;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    box-shadow: var(--app-shadow-sm);
    padding: 20px;
}

.codeiq-dashboard .upload-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-2);
}

.codeiq-dashboard .upload-tab {
    border: none;
    background: transparent;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--app-muted);
}

.codeiq-dashboard .upload-tab.active {
    background: #ffffff;
    border: 1px solid var(--app-border);
    color: var(--app-accent);
    box-shadow: var(--app-shadow-xs);
}

.codeiq-dashboard .upload-tab svg {
    width: 16px;
    height: 16px;
}

.codeiq-dashboard .upload-header h3 {
    font-size: 16px;
    font-weight: 700;
}

.codeiq-dashboard .banks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.codeiq-dashboard .bank-card {
    border: 1px solid var(--app-border);
    border-radius: 18px;
    padding: 16px;
    background: #ffffff;
    box-shadow: var(--app-shadow-xs);
}

.codeiq-dashboard .bank-header {
    margin-bottom: 12px;
}

.codeiq-dashboard .bank-name {
    font-weight: 700;
    font-size: 14px;
}

.codeiq-dashboard .bank-details {
    font-size: 12px;
    color: var(--app-muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.codeiq-dashboard .account-number {
    font-size: 11px;
    color: var(--text-tertiary);
}

.codeiq-dashboard .platform-badge {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
}

.codeiq-dashboard .upload-area {
    border: 1px dashed var(--app-border-strong);
    border-radius: 16px;
    padding: 16px;
    background: var(--app-surface-2);
}

.codeiq-dashboard .upload-area:hover {
    border-color: rgba(154, 64, 84, 0.35);
    background: #ffffff;
}

.codeiq-dashboard .upload-area.dragover {
    border-color: var(--app-accent);
    background: #fdf5f7;
    box-shadow: var(--app-shadow-xs);
}

.codeiq-dashboard .upload-area.has-file {
    border-color: rgba(16, 185, 129, 0.4);
    background: #f0fdf4;
}

.codeiq-dashboard .upload-area.no-transactions {
    border-color: rgba(148, 163, 184, 0.4);
    background: var(--app-surface-2);
    opacity: 0.8;
}

.codeiq-dashboard .upload-progress-bar {
    background: var(--app-surface-3);
    border-radius: 999px;
    height: 6px;
}

.codeiq-dashboard .upload-progress-fill {
    border-radius: 999px;
    background: linear-gradient(135deg, var(--app-accent), var(--app-magenta));
}

.codeiq-dashboard .file-info {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    padding: 10px 12px;
}

.codeiq-dashboard .remove-file {
    border-radius: 8px;
    border: 1px solid var(--app-border);
    background: #ffffff;
}

.codeiq-dashboard .toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.codeiq-dashboard .toggle-slider {
    width: 36px;
    height: 20px;
    background: var(--app-surface-3);
    border-radius: 999px;
    position: relative;
    transition: all 0.2s ease;
}

.codeiq-dashboard .toggle-slider::after {
    content: "";
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.2s ease;
    box-shadow: var(--app-shadow-xs);
}

.codeiq-dashboard .toggle-slider::before {
    content: none;
}

.codeiq-dashboard .toggle-container input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--app-accent), var(--app-magenta));
}

.codeiq-dashboard .toggle-container input:checked + .toggle-slider::after {
    left: 18px;
}

.codeiq-dashboard .toggle-label {
    font-size: 12px;
    color: var(--app-muted);
}

.codeiq-dashboard .upload-summary {
    margin-top: 20px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-2);
}

.codeiq-dashboard .summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.codeiq-dashboard .summary-stat {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--app-border);
    text-align: center;
}

.codeiq-dashboard .summary-stat .stat-value {
    font-size: 18px;
}

.codeiq-dashboard .process-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.codeiq-dashboard .invoice-count-badge {
    background: rgba(154, 64, 84, 0.15);
    color: var(--app-accent);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}

/* Invoice upload panels */
.codeiq-dashboard .invoice-upload-section {
    background: var(--app-surface-2);
    border-radius: 16px;
    border: 1px solid var(--app-border);
    padding: 16px;
}

.codeiq-dashboard .invoice-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.codeiq-dashboard .invoice-column {
    background: #ffffff;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--app-shadow-xs);
}

.codeiq-dashboard .column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.codeiq-dashboard .column-title h4 {
    font-size: 14px;
    font-weight: 700;
}

.codeiq-dashboard .column-count {
    background: var(--app-surface-2);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--app-muted);
}

.codeiq-dashboard .invoice-drop-zone {
    border: 1px dashed var(--app-border-strong);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    background: var(--app-surface-2);
}

.codeiq-dashboard .invoice-drop-zone:hover,
.codeiq-dashboard .invoice-drop-zone.dragover {
    border-color: rgba(154, 64, 84, 0.35);
    background: #ffffff;
}

.codeiq-dashboard .drop-text {
    font-size: 12.5px;
    font-weight: 600;
}

.codeiq-dashboard .drop-hint {
    font-size: 11px;
    color: var(--app-muted);
}

.codeiq-dashboard .browse-link {
    color: var(--app-accent);
}

.codeiq-dashboard .invoice-mini-queue {
    margin-top: 12px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 12px;
    background: var(--app-surface-2);
}

.codeiq-dashboard .mini-extract-btn,
.codeiq-dashboard .mini-confirm-btn,
.codeiq-dashboard .manual-entry-inline {
    border-radius: 10px;
    border: 1px solid var(--app-border);
    background: #ffffff;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
}

.codeiq-dashboard .mini-confirm-btn {
    background: linear-gradient(135deg, var(--app-accent), var(--app-magenta));
    color: #ffffff;
    border: none;
}

.codeiq-dashboard .uploaded-invoices-container {
    margin-top: 16px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
}

.codeiq-dashboard .uploaded-invoices-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.codeiq-dashboard .uploaded-invoices-list {
    display: grid;
    gap: 10px;
}

.codeiq-dashboard .uploaded-invoices-container .invoice-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--app-surface-2);
}

.codeiq-dashboard .uploaded-invoices-container .invoice-card.sales {
    border-color: rgba(16, 185, 129, 0.3);
}

.codeiq-dashboard .uploaded-invoices-container .invoice-card.purchase {
    border-color: rgba(220, 38, 38, 0.3);
}

.codeiq-dashboard .invoice-icon {
    font-size: 18px;
}

.codeiq-dashboard .invoice-amount {
    font-family: var(--app-font-mono);
    font-weight: 700;
}

.codeiq-dashboard .invoice-action-btn.delete {
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: #ffffff;
}

/* Company selection and search */
.codeiq-dashboard .company-selection,
.codeiq-dashboard .master-user-search {
    background: #ffffff;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--app-shadow-sm);
}

.codeiq-dashboard .companies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.codeiq-dashboard .company-card {
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
    box-shadow: var(--app-shadow-xs);
    transition: all 0.2s ease;
}

.codeiq-dashboard .company-card:hover {
    border-color: rgba(154, 64, 84, 0.3);
    box-shadow: var(--app-shadow-sm);
}

.codeiq-dashboard .search-input-container {
    position: relative;
    margin-top: 12px;
}

.codeiq-dashboard .search-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    background: #ffffff;
    font-size: 13px;
}

.codeiq-dashboard .search-input:focus {
    outline: none;
    border-color: rgba(154, 64, 84, 0.4);
    box-shadow: 0 0 0 3px rgba(154, 64, 84, 0.12);
}

.codeiq-dashboard .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--text-tertiary);
}

/* Loading and error views */
.codeiq-dashboard .loading-simple,
.codeiq-dashboard .setup-container,
.codeiq-dashboard .error-details {
    background: #ffffff;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--app-shadow-sm);
}

.codeiq-dashboard .error-details {
    margin-top: 16px;
}

/* Command center */
.codeiq-dashboard .command-center {
    --cc-bg-primary: transparent;
    --cc-bg-secondary: var(--app-surface-2);
    --cc-bg-elevated: var(--app-surface);
    --cc-bg-inset: var(--app-surface-3);
    --cc-text-primary: var(--app-text);
    --cc-text-secondary: var(--app-muted);
    --cc-text-tertiary: #999999;
    --cc-accent: var(--app-accent);
    --cc-accent-light: #c4576a;
    --cc-accent-subtle: rgba(154, 64, 84, 0.08);
    --cc-border: var(--app-border);
    --cc-border-strong: var(--app-border-strong);
    --cc-divider: var(--app-border);
    --cc-shadow-sm: var(--app-shadow-xs);
    --cc-shadow-md: var(--app-shadow-sm);
    --cc-shadow-lg: var(--app-shadow-md);
    --cc-radius-sm: 8px;
    --cc-radius-md: 12px;
    --cc-radius-lg: 16px;
    --cc-radius-xl: 20px;
    --cc-font-display: var(--app-font-display);
    --cc-font-mono: var(--app-font-mono);
    padding: 48px 24px 32px;
    background: transparent;
    max-width: 1500px;
}

.tab-content:has(.command-center)::before {
    opacity: 0.08;
}

.codeiq-dashboard .command-center::before {
    opacity: 0.08;
}

.codeiq-dashboard .cc-header {
    border-bottom: 1px solid var(--app-border);
    padding-bottom: 20px;
}

.codeiq-dashboard .cc-header-title h1 {
    font-size: 30px;
    font-weight: 700;
    color: var(--app-text);
}

.codeiq-dashboard .cc-metrics-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--app-shadow-sm);
}

.codeiq-dashboard .cc-metric-card {
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 14px;
}

.codeiq-dashboard .cc-metric-value {
    font-family: var(--app-font-display);
    font-size: 22px;
    font-weight: 700;
}

.codeiq-dashboard .cc-command-section,
.codeiq-dashboard .cc-activity-section {
    background: #ffffff;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--app-shadow-sm);
}

.codeiq-dashboard .cc-commands-grid {
    display: grid;
    gap: 10px;
}

.codeiq-dashboard .cc-command-btn {
    background: #ffffff;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--app-shadow-xs);
}

.codeiq-dashboard .cc-command-btn:hover {
    border-color: rgba(154, 64, 84, 0.3);
    box-shadow: var(--app-shadow-sm);
}

.codeiq-dashboard .cc-command-icon {
    border-radius: 12px;
    background: var(--app-surface-2);
}

.codeiq-dashboard .cc-activity-item {
    border-bottom: 1px solid var(--app-border);
    padding-bottom: 10px;
}

.codeiq-dashboard .cc-activity-time {
    font-size: 11px;
    color: var(--text-tertiary);
}

.codeiq-dashboard .cc-status-bar {
    margin-top: 18px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 10px 14px;
    background: #ffffff;
}

/* Toasts - positioned below 60px top bar */
#toast-container {
    top: 72px;
    right: 20px;
    gap: 10px;
}

#toast-container .toast {
    border-radius: 14px;
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--app-shadow-md);
    min-width: 280px;
}

#toast-container .toast-message {
    font-size: 13px;
    color: var(--app-text);
}

@media (max-width: 1024px) {
    .codeiq-dashboard .tab-bar {
        flex-wrap: wrap;
        min-height: auto;
    }

    .codeiq-dashboard .codeiq-brand {
        min-width: auto;
        border-right: none;
    }

    .codeiq-dashboard .tab {
        min-width: 160px;
    }

    .codeiq-dashboard .command-center {
        padding: 32px 16px;
    }
}

@media (max-width: 720px) {
    .codeiq-dashboard .tab-content {
        padding: 20px 16px 36px;
    }

    .codeiq-dashboard .upload-section {
        padding: 16px;
    }

    .codeiq-dashboard .process-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

.review-interface {
    --review-bg: #faf8f5;
    --review-surface: #ffffff;
    --review-surface-2: #faf8f5;
    --review-surface-3: #f5f2ed;
    --review-border: #d4d0c8;
    --review-border-strong: #c4c0b8;
    --review-text: #1a1a1a;
    --review-muted: #6b6b6b;
    --review-accent: #9a4054;
    --review-accent-strong: #9a4054;
    --review-accent-soft: #fdf5f7;
    --review-magenta: #c4576a;
    --review-success: #0f8a5f;
    --review-warning: #b45309;
    --review-danger: #dc2626;
    --review-info: #5b6eae;
    --review-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --review-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --review-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --review-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --review-radius-sm: 4px;
    --review-radius-md: 4px;
    --review-radius-lg: 8px;
    --review-radius-xl: 8px;
    --review-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --review-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --review-font-mono: 'JetBrains Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;
    --table-bg: var(--review-surface);
    --table-border-color: var(--review-border);
    --table-header-bg: #faf8f5;
    --primary-50: #fdf5f7;
    --primary-100: #fae8ec;
    --primary-400: #c4576a;
    --primary-500: var(--review-accent);
    --primary-600: var(--review-accent-strong);
    --font-mono: var(--review-font-mono);

    font-family: var(--review-font);
    color: var(--review-text);
    background: #faf8f5;
    min-height: 100vh;
    padding: 32px 24px 48px;
}

.review-interface .review-content-area {
    background: var(--review-surface);
    border: 1px solid var(--review-border);
    border-radius: var(--review-radius-xl);
    box-shadow: var(--review-shadow-md);
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    animation: review-lift 0.45s ease-out;
}

.review-interface.xero-platform .review-content-area,
.review-interface.quickbooks-platform .review-content-area {
    max-width: 1880px;
}

.review-interface .review-content-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--review-accent), var(--review-magenta));
}

.review-interface .review-header {
    padding: 28px 28px 22px;
    border-bottom: 1px solid var(--review-border);
    background: #ffffff;
}

.review-interface .review-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.review-interface .review-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.review-interface .review-title h2 {
    font-family: var(--review-font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--review-text);
    margin: 0;
}

.review-interface .review-subtitle {
    font-size: 13px;
    color: var(--review-muted);
    margin: 4px 0 0;
    font-weight: 500;
}

.review-interface .back-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--review-border);
    background: #ffffff;
    color: var(--review-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-interface .back-btn:hover {
    background: var(--review-surface-2);
    color: var(--review-accent);
    box-shadow: var(--review-shadow-xs);
    transform: translateX(-1px);
}

.review-interface .review-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.review-interface .review-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--review-surface-3);
    border: 1px solid var(--review-border);
    border-radius: 999px;
}

.review-interface .view-toggle-btn {
    border: none;
    background: transparent;
    color: var(--review-muted);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-interface .view-toggle-btn.active {
    background: #ffffff;
    color: var(--review-accent);
    box-shadow: var(--review-shadow-xs);
    border: 1px solid rgba(154, 64, 84, 0.18);
}

.review-interface .view-toggle-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.review-interface .view-toggle-btn:focus-visible,
.review-interface .action-btn:focus-visible,
.review-interface .stat-pill:focus-visible,
.review-interface .btn-analyse-riq:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(154, 64, 84, 0.18);
}

.review-interface .action-btn {
    border-radius: 12px;
    font-weight: 600;
    padding: 9px 16px;
    transition: all 0.2s ease;
}

.review-interface .action-btn.success {
    background: linear-gradient(135deg, var(--review-accent), var(--review-magenta));
    border: none;
    color: #ffffff;
    box-shadow: var(--review-shadow-sm);
}

.review-interface .action-btn.success:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.review-interface .metrics-container {
    display: block;
    margin: 16px 0 24px;
    padding: 0 28px;
    max-width: 100%;
}

.review-interface .stats-pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
    background: var(--review-surface-2);
    border: 1px solid var(--review-border);
    border-radius: var(--review-radius-lg);
}

.review-interface .stat-pill {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    min-width: 120px;
    background: #ffffff;
    border: 1px solid var(--review-border);
    border-radius: 14px;
    box-shadow: var(--review-shadow-xs);
    cursor: pointer;
    transition: all 0.2s ease;
    animation: pill-enter 0.35s ease-out both;
}

.review-interface .stat-pill:hover {
    border-color: rgba(154, 64, 84, 0.3);
    transform: translateY(-1px);
    box-shadow: var(--review-shadow-sm);
}

.review-interface .stat-pill.active {
    background: #ffffff;
    border-color: rgba(196, 87, 106, 0.4);
    box-shadow: 0 0 0 3px rgba(196, 87, 106, 0.08);
}

.review-interface .stat-pill.stat-total {
    border-color: rgba(154, 64, 84, 0.2);
    background: #ffffff;
}

.review-interface .stat-pill .stat-count {
    font-family: var(--review-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--review-text);
}

.review-interface .stat-pill .stat-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--review-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.review-interface .review-transaction-panel {
    padding: 0 24px 28px;
}

.review-interface .bank-tabs-wrapper {
    position: relative;
    margin: 8px 0 16px;
}

.review-interface .bank-tabs-wrapper::before,
.review-interface .bank-tabs-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.review-interface .bank-tabs-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, rgba(248, 242, 252, 0.95), transparent);
}

.review-interface .bank-tabs-wrapper::after {
    right: 0;
    background: linear-gradient(270deg, rgba(248, 242, 252, 0.95), transparent);
}

.review-interface .bank-tabs-wrapper.scroll-left::before {
    opacity: 1;
}

.review-interface .bank-tabs-wrapper.scroll-right::after {
    opacity: 1;
}

.review-interface .bank-account-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 12px;
    border-radius: var(--review-radius-lg);
    border: 1px solid var(--review-border);
    background: var(--review-surface-2);
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.review-interface .bank-account-tabs::-webkit-scrollbar {
    height: 6px;
}

.review-interface .bank-account-tabs::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.6);
    border-radius: 999px;
}

.review-interface .bank-account-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.review-interface .bank-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: #ffffff;
    color: var(--review-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-interface .bank-tab:hover {
    border-color: rgba(154, 64, 84, 0.25);
    box-shadow: var(--review-shadow-xs);
}

.review-interface .bank-tab.active {
    background: linear-gradient(135deg, var(--review-accent), var(--review-magenta));
    color: #ffffff;
    border-color: transparent;
    box-shadow: var(--review-shadow-sm);
}

.review-interface .bank-tab-count {
    background: rgba(0, 0, 0, 0.08);
    color: var(--review-muted);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}

.review-interface .bank-tab.active .bank-tab-count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.review-interface .bank-account-container {
    display: none;
}

.review-interface .bank-account-container.active {
    display: block;
}

.review-interface .review-controls-wrapper {
    display: grid;
    grid-template-columns: minmax(240px, 1.1fr) minmax(240px, 1.3fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: var(--review-radius-lg);
    border: 1px solid var(--review-border);
    background: var(--review-surface-2);
    margin-bottom: 16px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.review-interface .search-and-counter-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.review-interface .transaction-search-container {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.review-interface .transaction-search-input {
    width: 100%;
    padding: 9px 34px 9px 34px;
    border-radius: 12px;
    border: 1px solid var(--review-border);
    background: #ffffff;
    font-size: 13px;
    color: var(--review-text);
    box-shadow: var(--review-shadow-xs);
    transition: all 0.2s ease;
}

.review-interface .transaction-search-input:focus {
    outline: none;
    border-color: rgba(154, 64, 84, 0.35);
    box-shadow: 0 0 0 3px rgba(154, 64, 84, 0.12);
}

.review-interface .transaction-search-container .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.review-interface .clear-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: none;
    background: #d4d0c8;
    color: #475569;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-interface .clear-search-btn:hover {
    background: #c4c0b8;
    color: #1a1a1a;
}

.review-interface .selection-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--review-border);
    background: #ffffff;
    color: var(--review-muted);
    font-size: 12px;
    font-weight: 600;
}

.review-interface .selection-counter .counter-value {
    color: var(--review-accent);
    font-weight: 700;
}

.review-interface .filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.review-interface .transaction-filter-select {
    min-width: 150px;
    padding: 8px 30px 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--review-border);
    background: #ffffff;
    font-size: 12.5px;
    color: var(--review-text);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238a94a6'%3E%3Cpath d='M5.5 7.5l4.5 4 4.5-4' stroke='%238a94a6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    transition: all 0.2s ease;
}

.review-interface .transaction-filter-select:hover {
    border-color: rgba(154, 64, 84, 0.3);
}

.review-interface .transaction-filter-select:focus {
    outline: none;
    border-color: rgba(154, 64, 84, 0.45);
    box-shadow: 0 0 0 3px rgba(154, 64, 84, 0.12);
}

.review-interface .transaction-filter-select.filter-active {
    border-color: rgba(196, 87, 106, 0.45);
    box-shadow: 0 0 0 3px rgba(196, 87, 106, 0.12);
}

.review-interface .btn-analyse-riq {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid rgba(154, 64, 84, 0.25);
    background: linear-gradient(135deg, #1a1a1a, #1a1a1a);
    color: #ffffff;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.review-interface .btn-analyse-riq:hover {
    transform: translateY(-1px);
    box-shadow: var(--review-shadow-sm);
}

.review-interface .review-table-wrapper {
    margin-bottom: 20px;
}

.review-interface {
    max-width: none !important;
    width: 100% !important;
}

.review-interface .review-table-container {
    position: relative;
    background: var(--review-surface);
    border: 1px solid var(--review-border);
    border-radius: var(--review-radius-lg);
    box-shadow: var(--review-shadow-xs);
    overflow-x: auto;
    overflow-y: visible;
    padding: 0 12px 0 0;
    width: 100% !important;
    max-width: none !important;
}

.review-interface .review-table-container::-webkit-scrollbar {
    height: 8px;
}

.review-interface .review-table-container::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.6);
    border-radius: 999px;
}

.review-interface .review-table-container::-webkit-scrollbar-track {
    background: transparent;
}

.review-interface .review-table-container .scroll-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.review-interface .review-table-container .scroll-shadow.left {
    left: 0;
    background: linear-gradient(90deg, rgba(250, 244, 252, 0.95), rgba(250, 244, 252, 0));
}

.review-interface .review-table-container .scroll-shadow.right {
    right: 0;
    background: linear-gradient(270deg, rgba(250, 244, 252, 0.95), rgba(250, 244, 252, 0));
}

.review-interface .review-table-container.has-scroll-left .scroll-shadow.left {
    opacity: 1;
}

.review-interface .review-table-container.has-scroll-right .scroll-shadow.right {
    opacity: 1;
}

.review-interface .transaction-table,
.review-interface .transactions-table {
    width: 100% !important;
    min-width: 1100px !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: separate;
    border-spacing: 0;
}

.review-interface .transaction-table thead th,
.review-interface .transactions-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--table-header-bg);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 700;
    color: #6b6b6b;
    padding: 12px 14px;
    border-bottom: 1px solid var(--review-border);
    text-align: left;
    white-space: nowrap;
}

.review-interface .transaction-table thead th.sticky-column,
.review-interface .transaction-table thead th.sticky-column-2,
.review-interface .transactions-table thead th.sticky-column,
.review-interface .transactions-table thead th.sticky-column-2 {
    background: var(--table-header-bg) !important;
}

.review-interface .transaction-table tbody td,
.review-interface .transactions-table tbody td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--review-text);
    border-bottom: 1px solid var(--review-border);
    background: transparent;
}

.review-interface .transaction-table tbody tr:nth-child(even),
.review-interface .transactions-table tbody tr:nth-child(even) {
    background: #faf8f5;
}

.review-interface .transaction-row {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    animation: row-enter 0.35s ease-out both;
}

.review-interface .transaction-row:hover {
    background: #f5f2ed !important;
    box-shadow: inset 3px 0 0 rgba(154, 64, 84, 0.35);
    transform: none;
}

.review-interface .transaction-row.selected {
    background: #fdf5f7 !important;
    box-shadow: inset 3px 0 0 var(--review-accent);
}

.review-interface .transaction-row:hover .sticky-column,
.review-interface .transaction-row:hover .sticky-column-2 {
    background: #f5f2ed !important;
}

.review-interface .transaction-row.selected .sticky-column,
.review-interface .transaction-row.selected .sticky-column-2 {
    background: #fdf5f7 !important;
}

.review-interface .transaction-row.has-riq-flag {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.12), transparent 40%);
}

.review-interface .transaction-row.processing {
    animation: pulse 2s ease-in-out infinite;
}

.review-interface .transaction-row.riq-flagged {
    animation: riq-highlight-fade 3s ease-out;
}

.review-interface .col-checkbox {
    width: 45px !important;
}

.review-interface .col-date {
    width: 90px !important;
    font-variant-numeric: tabular-nums;
    color: var(--review-muted);
}

.review-interface .col-description {
    width: 180px !important;
}

.review-interface .description-cell {
    color: var(--review-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0; /* Required for text-overflow with table-layout: fixed */
}

.review-interface .col-amount {
    width: 95px !important;
    text-align: center !important;
    font-family: var(--review-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.review-interface .col-amount,
.review-interface td.amount-cell {
    text-align: center !important;
}

.review-interface .amount-cell.positive {
    color: var(--review-success);
}

.review-interface .amount-cell.negative {
    color: var(--review-danger);
}

.review-interface .col-account {
    width: 155px !important;
}

.review-interface .col-vat {
    width: 90px !important;
}

.review-interface .col-contact,
.review-interface .col-tracking {
    width: 115px !important;
}

.review-interface .col-vendor,
.review-interface .col-customer {
    width: 115px !important;
}

.review-interface .col-class {
    width: 90px !important;
}

.review-interface .col-confidence {
    width: 85px !important;
}

.review-interface .col-method {
    width: 95px !important;
}

.review-interface .col-type {
    width: 75px !important;
}

.review-interface .col-rate {
    width: 65px !important;
    text-align: right;
}

.review-interface .col-actions {
    width: 50px !important;
    text-align: center;
}

.review-interface th.col-actions,
.review-interface td.col-actions {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.review-interface .sortable-header {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.review-interface .sortable-header:hover {
    background: rgba(148, 163, 184, 0.12);
    color: var(--review-text);
}

.review-interface .sort-indicator {
    margin-left: 6px;
    font-size: 11px;
    color: #94a3b8;
}

.review-interface .sortable-header.sort-asc .sort-indicator,
.review-interface .sortable-header.sort-desc .sort-indicator {
    color: var(--review-accent);
}

.review-interface input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--review-accent);
    cursor: pointer;
}

.review-interface .transaction-table td select,
.review-interface select.account-select,
.review-interface select.vat-select,
.review-interface select.contact-select,
.review-interface select.tracking1-select,
.review-interface select.tracking2-select,
.review-interface select.vendor-select,
.review-interface select.customer-select,
.review-interface select.class-select {
    font-size: 12px !important;
    padding: 6px 28px 6px 10px !important;
    border-radius: 10px;
    border: 1px solid var(--review-border);
    background: #ffffff;
    color: var(--review-text);
    appearance: none;
    max-width: 220px !important;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

.review-interface select.account-select:focus,
.review-interface select.vat-select:focus,
.review-interface select.contact-select:focus,
.review-interface select.tracking1-select:focus,
.review-interface select.tracking2-select:focus,
.review-interface select.vendor-select:focus,
.review-interface select.customer-select:focus,
.review-interface select.class-select:focus {
    outline: none;
    border-color: rgba(154, 64, 84, 0.45);
    box-shadow: 0 0 0 3px rgba(154, 64, 84, 0.12);
}


.review-interface .confidence-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    background: rgba(148, 163, 184, 0.15);
    color: #475569;
}

.review-interface .confidence-badge.confidence-high,
.review-interface .confidence-badge.high,
.review-interface .confidence-badge.auto {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.35);
}

.review-interface .confidence-badge.confidence-medium,
.review-interface .confidence-badge.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.35);
}

.review-interface .confidence-badge.confidence-low,
.review-interface .confidence-badge.low {
    background: rgba(220, 38, 38, 0.15);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.35);
}

.review-interface .confidence-badge.transfer {
    background: rgba(37, 99, 235, 0.15);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.3);
}

.review-interface .confidence-badge.invoice {
    background: rgba(99, 102, 241, 0.15);
    color: #4338ca;
    border-color: rgba(99, 102, 241, 0.3);
}

.review-interface .method-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.review-interface .transaction-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
}

.review-interface .transaction-type-badge.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-interface .transaction-type-badge.clickable:hover {
    border-color: rgba(154, 64, 84, 0.3);
    color: var(--review-accent);
}

.review-interface .transaction-type-badge.type-money-in {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.3);
}

.review-interface .transaction-type-badge.type-money-out {
    background: rgba(220, 38, 38, 0.15);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.3);
}

.review-interface .transaction-type-badge.type-customer-receipt {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.3);
}

.review-interface .transaction-type-badge.type-supplier-payment {
    background: rgba(234, 179, 8, 0.18);
    color: #a16207;
    border-color: rgba(234, 179, 8, 0.35);
}

.review-interface .transaction-type-badge.type-unknown {
    background: rgba(148, 163, 184, 0.2);
    color: #475569;
    border-color: rgba(148, 163, 184, 0.3);
}

.review-interface .conversion-rate {
    font-family: var(--review-font-mono);
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid rgba(234, 179, 8, 0.3);
    background: rgba(254, 243, 199, 0.6);
    color: #92400e;
}

.review-interface .no-conversion {
    color: #94a3b8;
    font-size: 12px;
}

.review-interface .btn-riq-img {
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.review-interface .btn-riq-img:hover {
    background: rgba(154, 64, 84, 0.12);
    transform: translateY(-1px);
}

.review-interface .review-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--review-border);
    background: var(--review-surface-2);
    max-width: 100%;
    margin: 0;
}

.review-interface .review-pagination .pagination-info {
    font-size: 12.5px;
    color: var(--review-muted);
    font-weight: 600;
}

.review-interface .review-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-interface .review-pagination .pagination-btn {
    border-radius: 10px;
    border: 1px solid var(--review-border);
    background: #ffffff;
    color: var(--review-text);
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-interface .review-pagination .pagination-btn:hover:not(:disabled) {
    border-color: rgba(154, 64, 84, 0.3);
    color: var(--review-accent);
}

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

.review-interface .review-pagination .pagination-current {
    font-size: 12px;
    font-weight: 700;
    color: var(--review-accent);
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(154, 64, 84, 0.08);
}

.review-interface .vat-audit-panel,
.review-interface .account-summary-panel,
.review-interface .transfers-panel,
.review-interface .invoices-panel {
    display: none;
    margin: 0 24px 24px;
    padding: 20px;
    border-radius: var(--review-radius-lg);
    border: 1px solid var(--review-border);
    background: var(--review-surface);
    box-shadow: var(--review-shadow-xs);
}

.review-interface .vat-audit-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    align-items: start;
}

.review-interface .vat-audit-sidebar {
    border-right: 1px solid var(--review-border);
    padding-right: 12px;
}

.review-interface .vat-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--review-surface-2);
    border: 1px solid var(--review-border);
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
}

.review-interface .vat-chip.active {
    border-color: rgba(154, 64, 84, 0.3);
    background: var(--review-accent-soft);
    color: var(--review-accent);
    box-shadow: var(--review-shadow-xs);
}

.review-interface .vat-audit-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.review-interface .vat-group-card {
    border: 1px solid var(--review-border);
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
    box-shadow: var(--review-shadow-xs);
}

.review-interface .vat-group-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.review-interface .vat-group-title {
    font-weight: 700;
    color: var(--review-text);
    font-size: 13px;
}

.review-interface .vat-group-pill {
    background: rgba(154, 64, 84, 0.12);
    color: var(--review-accent);
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.review-interface .vat-group-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--review-muted);
    margin-bottom: 8px;
}

.review-interface .vat-group-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.review-interface .vat-group-actions select {
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid var(--review-border);
    font-size: 12px;
}

.review-interface .vat-group-actions button {
    border-radius: 10px;
    border: 1px solid rgba(154, 64, 84, 0.2);
    padding: 6px 10px;
    background: var(--review-accent);
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.2s ease;
}

.review-interface .vat-group-actions button.secondary {
    background: #ffffff;
    color: var(--review-accent);
}

.review-interface .vat-group-actions button:hover {
    filter: brightness(1.05);
}

.review-interface .vat-group-details {
    margin-top: 8px;
    border-top: 1px dashed var(--review-border);
    padding-top: 8px;
    display: none;
}

.review-interface .anomaly-card {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(254, 243, 199, 0.5);
    padding: 10px;
    border-radius: 10px;
    margin-top: 8px;
    color: #92400e;
    font-size: 12px;
}

.review-interface .vat-empty {
    padding: 16px;
    border: 1px dashed var(--review-border);
    border-radius: 12px;
    background: var(--review-surface-2);
    color: var(--review-muted);
    font-size: 12.5px;
}

.review-interface .vat-audit-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.review-interface .vat-audit-search {
    flex: 1;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--review-border);
    font-size: 13px;
}

.review-interface .vat-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(154, 64, 84, 0.12);
    color: var(--review-accent);
    border: 1px solid rgba(154, 64, 84, 0.25);
    font-weight: 600;
    font-size: 12px;
}

.review-interface .vat-filter-pill button {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-weight: 700;
}

.review-interface .vat-return-preview {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.review-interface .vat-return-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.review-interface .vat-return-header h4 {
    margin: 0;
    color: #166534;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-interface .vat-return-toggle {
    color: #166534;
    transition: transform 0.2s ease;
}

.review-interface .vat-return-toggle.collapsed {
    transform: rotate(-90deg);
}

.review-interface .vat-return-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.review-interface .vat-return-body.collapsed {
    display: none;
}

.review-interface .vat-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.review-interface .vat-box-label {
    font-size: 10px;
    color: #6b6b6b;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.review-interface .vat-box-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--review-text);
    font-family: var(--review-font-mono);
}

.review-interface .vat-box-value.positive {
    color: #059669;
}

.review-interface .vat-box-value.negative {
    color: #dc2626;
}

.review-interface .vat-box.highlight {
    background: linear-gradient(135deg, #dcfce7, #d1fae5);
    border-color: rgba(34, 197, 94, 0.5);
}

.review-interface .vat-box.highlight .vat-box-value {
    font-size: 20px;
}

.review-interface .vat-return-disclaimer {
    font-size: 11px;
    color: #6b6b6b;
    margin-top: 12px;
    font-style: italic;
}

.review-interface .account-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.review-interface .account-summary-card {
    border: 1px solid var(--review-border);
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
    box-shadow: var(--review-shadow-xs);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.review-interface .account-summary-card:hover {
    box-shadow: var(--review-shadow-sm);
    transform: translateY(-1px);
}

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

.review-interface .account-summary-name {
    font-weight: 700;
    color: var(--review-text);
    font-size: 13px;
}

.review-interface .account-summary-code {
    font-size: 11px;
    color: var(--review-muted);
    background: var(--review-surface-2);
    padding: 2px 6px;
    border-radius: 6px;
}

.review-interface .account-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
    font-size: 12px;
}

.review-interface .account-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-interface .account-summary-stat-label {
    color: var(--review-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.review-interface .account-summary-stat-value {
    font-weight: 700;
    color: var(--review-text);
    font-family: var(--review-font-mono);
}

.review-interface .account-summary-stat-value.expense {
    color: var(--review-danger);
}

.review-interface .account-summary-stat-value.income {
    color: var(--review-success);
}

.review-interface .transfers-empty,
.review-interface .invoices-empty {
    text-align: center;
    padding: 36px;
    color: var(--review-muted);
}

.review-interface .transfer-pair-card {
    border: 1px solid var(--review-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--review-surface-2);
}

.review-interface .transfer-pair-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.review-interface .transfer-pair-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--review-info);
    font-family: var(--review-font-mono);
}

.review-interface .transfer-pair-status {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.review-interface .transfer-pair-status.matched {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.review-interface .transfer-pair-status.unmatched {
    background: rgba(245, 158, 11, 0.2);
    color: #92400e;
}

.review-interface .transfer-pair-sides {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}

.review-interface .transfer-side {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--review-border);
}

.review-interface .transfer-side-label {
    font-size: 10px;
    color: var(--review-muted);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.review-interface .transfer-side-bank {
    font-weight: 700;
    color: var(--review-text);
    font-size: 13px;
}

.review-interface .transfer-side-desc {
    font-size: 12px;
    color: var(--review-muted);
    margin-top: 4px;
}

.review-interface .transfer-arrow {
    color: var(--review-info);
    font-size: 20px;
}

.review-interface .invoices-section {
    margin-bottom: 24px;
}

.review-interface .invoices-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--review-border);
}

.review-interface .invoices-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.review-interface .invoices-section-icon.sales {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.review-interface .invoices-section-icon.purchase {
    background: rgba(220, 38, 38, 0.15);
    color: #b91c1c;
}

.review-interface .invoices-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--review-text);
}

.review-interface .invoices-section-count {
    font-size: 12px;
    color: var(--review-muted);
}

.review-interface .invoices-panel .invoice-card {
    display: block;
    border: 1px solid var(--review-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    background: #ffffff;
    transition: all 0.2s ease;
    position: relative;
}

.review-interface .invoices-panel .invoice-card.matched {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: rgba(16, 185, 129, 0.4);
}

.review-interface .invoices-panel .invoice-card:hover {
    border-color: rgba(154, 64, 84, 0.25);
    box-shadow: var(--review-shadow-sm);
}

.review-interface .invoices-panel .invoice-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.review-interface .invoices-panel .invoice-number {
    font-size: 14px;
    font-weight: 700;
    color: var(--review-text);
}

.review-interface .invoices-panel .invoice-contact {
    font-size: 12px;
    color: var(--review-muted);
}

.review-interface .invoices-panel .invoice-amount {
    font-family: var(--review-font-mono);
    font-size: 18px;
    font-weight: 700;
    text-align: right;
}

.review-interface .invoices-panel .invoice-amount.sales {
    color: var(--review-success);
}

.review-interface .invoices-panel .invoice-amount.purchase {
    color: var(--review-danger);
}

.review-interface .invoices-panel .invoice-dates {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--review-muted);
}

.review-interface .invoices-panel .invoice-date-label {
    font-weight: 700;
}

.review-interface .invoices-panel .invoice-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.review-interface .invoices-panel .invoice-status-badge.outstanding {
    background: rgba(245, 158, 11, 0.2);
    color: #92400e;
}

.review-interface .invoices-panel .invoice-status-badge.matched {
    background: rgba(16, 185, 129, 0.2);
    color: #047857;
}

.review-interface .invoices-panel .invoice-status-badge.overdue {
    background: rgba(220, 38, 38, 0.2);
    color: #b91c1c;
}

.review-interface .invoices-panel .invoice-match-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--review-border);
}

.review-interface .invoices-panel .invoice-match-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(16, 185, 129, 0.1);
    padding: 10px 12px;
    border-radius: 10px;
}

.review-interface .invoices-panel .invoice-match-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-interface .invoices-panel .invoice-match-label {
    font-size: 10px;
    color: var(--review-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.review-interface .invoices-panel .invoice-match-txn {
    font-size: 12px;
    color: var(--review-text);
    font-weight: 600;
}

.review-interface .invoices-panel .invoice-match-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.review-interface .invoices-panel .invoice-match-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    font-size: 11px;
}

.review-interface .invoices-panel .invoice-match-line .invoice-match-amount {
    font-weight: 700;
    color: var(--review-success);
}

.review-interface .invoices-panel .invoice-match-line.adjustment {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.review-interface .invoices-panel .invoice-match-line.adjustment .invoice-match-amount {
    color: #b45309;
}

.review-interface .invoices-panel .invoice-match-line.total {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-weight: 700;
}

.review-interface .invoices-panel .invoice-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.review-interface .invoices-panel .invoice-action-btn {
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.review-interface .invoices-panel .invoice-action-btn.primary {
    background: linear-gradient(135deg, var(--review-accent), var(--review-magenta));
    color: #ffffff;
}

.review-interface .invoices-panel .invoice-action-btn.secondary {
    background: #ffffff;
    border-color: var(--review-border);
    color: var(--review-text);
}

.review-interface .invoices-panel .invoice-action-btn.danger {
    background: #ffffff;
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--review-danger);
}

.review-interface .invoices-panel .invoice-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--review-shadow-xs);
}

.review-interface .invoices-panel .invoice-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--review-surface-2);
    border-radius: 16px;
    border: 1px solid var(--review-border);
}

.review-interface .invoices-panel .invoice-stat-card {
    background: #ffffff;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--review-border);
    text-align: center;
}

.review-interface .invoices-panel .invoice-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--review-text);
}

.review-interface .invoices-panel .invoice-stat-label {
    font-size: 11px;
    color: var(--review-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.invoice-txn-picker-modal,
.invoice-adjustment-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.invoice-txn-picker-modal.active,
.invoice-adjustment-modal.active {
    display: flex;
}

.invoice-txn-picker-content,
.invoice-adjustment-content {
    background: #ffffff;
    border-radius: 20px;
    width: 90%;
    max-width: 720px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--review-shadow-lg, 0 28px 60px rgba(0, 0, 0, 0.2));
    overflow: hidden;
}

.invoice-txn-picker-header,
.invoice-adjustment-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--review-border);
    background: var(--review-surface-2, #faf8f5);
}

.invoice-adjustment-header {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-bottom: 1px solid #fcd34d;
}

.invoice-txn-picker-title,
.invoice-adjustment-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.invoice-txn-picker-subtitle {
    font-size: 12px;
    color: #6b6b6b;
    margin-top: 4px;
}

.invoice-txn-picker-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #6b6b6b;
    border-radius: 8px;
}

.invoice-txn-picker-close:hover {
    background: var(--review-surface-2);
    color: #1a1a1a;
}

.invoice-txn-picker-body {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
}

.invoice-txn-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--review-border);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.invoice-txn-picker-item:hover {
    border-color: rgba(154, 64, 84, 0.3);
    background: var(--review-accent-soft, #fdf5f7);
}

.invoice-txn-picker-item.selected {
    border-color: rgba(154, 64, 84, 0.6);
    background: var(--review-accent-soft, #fdf5f7);
}

.invoice-txn-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--review-border-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.invoice-txn-picker-item.selected .invoice-txn-radio {
    border-color: var(--review-accent, #9a4054);
    background: var(--review-accent, #9a4054);
}

.invoice-txn-picker-item.selected .invoice-txn-radio::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
}

.invoice-txn-desc {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.invoice-txn-meta {
    font-size: 11px;
    color: #6b6b6b;
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.invoice-txn-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--review-success, #059669);
    flex-shrink: 0;
}

.invoice-txn-amount.negative {
    color: var(--review-danger, #dc2626);
}

.invoice-txn-picker-footer,
.invoice-adjustment-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--review-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.invoice-txn-picker-empty {
    text-align: center;
    padding: 40px;
    color: #6b6b6b;
    font-size: 12px;
}

.invoice-adjustment-body {
    padding: 24px;
}

.invoice-adjustment-summary {
    background: var(--review-surface-2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

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

.invoice-adjustment-row.total {
    border-top: 2px solid var(--review-border-strong);
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
}

.invoice-adjustment-row .label {
    color: #6b6b6b;
}

.invoice-adjustment-row .value {
    color: #1a1a1a;
    font-weight: 700;
}

.invoice-adjustment-row .value.positive {
    color: var(--review-success, #059669);
}

.invoice-adjustment-row .value.negative {
    color: var(--review-danger, #dc2626);
}

.invoice-adjustment-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invoice-adjustment-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 2px solid var(--review-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.invoice-adjustment-option:hover {
    border-color: rgba(154, 64, 84, 0.3);
    background: var(--review-accent-soft, #fdf5f7);
}

.invoice-adjustment-option.selected {
    border-color: var(--review-accent, #9a4054);
    background: var(--review-accent-soft, #fdf5f7);
}

.invoice-adjustment-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #c4c0b8;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.invoice-adjustment-option.selected .invoice-adjustment-radio {
    border-color: var(--review-accent, #9a4054);
    background: var(--review-accent, #9a4054);
}

.invoice-adjustment-option.selected .invoice-adjustment-radio::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
}

.invoice-adjustment-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f5f2ed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6b6b6b;
    transition: all 0.2s ease;
}

.invoice-adjustment-option.selected .invoice-adjustment-option-icon {
    background: var(--review-accent-soft, #fdf5f7);
    color: var(--review-accent, #9a4054);
}

.invoice-adjustment-option-title {
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.invoice-adjustment-option-desc {
    font-size: 12px;
    color: #6b6b6b;
}

@keyframes review-lift {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes row-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pill-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.review-interface .stat-pill:nth-child(1) { animation-delay: 0ms; }
.review-interface .stat-pill:nth-child(2) { animation-delay: 40ms; }
.review-interface .stat-pill:nth-child(3) { animation-delay: 80ms; }
.review-interface .stat-pill:nth-child(4) { animation-delay: 120ms; }
.review-interface .stat-pill:nth-child(5) { animation-delay: 160ms; }
.review-interface .stat-pill:nth-child(6) { animation-delay: 200ms; }

@media (max-width: 1200px) {
    .review-interface .review-header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-interface .review-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .review-interface .review-controls-wrapper {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .review-interface .filter-controls {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .review-interface .vat-audit-body {
        grid-template-columns: 1fr;
    }

    .review-interface .vat-audit-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--review-border);
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
}

@media (max-width: 900px) {
    .review-interface {
        padding: 24px 16px 36px;
    }

    .review-interface .review-header {
        padding: 24px 20px 18px;
    }

    .review-interface .review-transaction-panel {
        padding: 0 16px 24px;
    }

    .review-interface .metrics-container {
        padding: 0 16px;
    }

    .review-interface .vat-audit-panel,
    .review-interface .account-summary-panel,
    .review-interface .transfers-panel,
    .review-interface .invoices-panel {
        margin: 0 16px 20px;
    }

    .review-interface .review-pagination {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-interface .transfer-pair-sides {
        grid-template-columns: 1fr;
    }

    .review-interface .transfer-arrow {
        transform: rotate(90deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-interface *,
    .review-interface *::before,
    .review-interface *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   PRIORITY OVERRIDES - Centering & RiQ Button Fix
   ========================================================================== */

/* Fix RiQ button - use purple gradient instead of dark/black */
.review-interface .btn-analyse-riq {
    background: linear-gradient(135deg, var(--review-accent, #9a4054), var(--review-magenta, #c4576a)) !important;
    border-color: rgba(154, 64, 84, 0.3) !important;
    color: #ffffff !important;
}

.review-interface .btn-analyse-riq:hover {
    filter: brightness(1.1) !important;
    box-shadow: 0 4px 12px rgba(154, 64, 84, 0.3) !important;
}

/* Center metrics container and stats pills */
.review-interface .metrics-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 16px !important;
}

.review-interface .stats-pill-container {
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Center bank tabs wrapper and contents */
.review-interface .bank-tabs-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.review-interface .bank-account-tabs {
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
}