// Variables (spacing/typography) come from _variables.scss via manifest order.
// COLOR uses BS5 CSS custom properties so dark mode flips automatically.

// Brand-meaningful colors (semantic, identical in light + dark themes).
:root {
    --fusion-bank-accent:           #3b82f6;
    --fusion-bank-accent-hover:     #2563eb;
    --fusion-bank-accent-bg:        rgba(59, 130, 246, 0.10);

    --fusion-confidence-high:       #10b981;
    --fusion-confidence-high-bg:    rgba(16, 185, 129, 0.12);
    --fusion-confidence-medium:     #f59e0b;
    --fusion-confidence-medium-bg:  rgba(245, 158, 11, 0.12);
    --fusion-confidence-low:        #ef4444;
    --fusion-confidence-low-bg:     rgba(239, 68, 68, 0.12);
    --fusion-confidence-none:       #9ca3af;
    --fusion-confidence-none-bg:    rgba(156, 163, 175, 0.12);
}

.o_fusion_bank_rec {
    background: var(--bs-body-bg);
    min-height: 100vh;
    font-family: $fusion-font-family;
    color: var(--bs-body-color);

    &_header {
        background: var(--bs-body-bg);
        color: var(--bs-emphasis-color);
        border-bottom: 1px solid var(--bs-border-color);
        padding: $fusion-space-4 $fusion-space-6;
        display: flex;
        justify-content: space-between;
        align-items: center;

        h1 {
            font-size: $fusion-font-size-xl;
            font-weight: $fusion-font-weight-semibold;
            margin: 0;
            color: inherit;
        }

        .o_fusion_stats {
            display: flex;
            gap: $fusion-space-6;
            font-size: $fusion-font-size-sm;
            color: var(--bs-secondary-color);

            .stat-value {
                font-weight: $fusion-font-weight-semibold;
                color: var(--bs-emphasis-color);
                margin-left: $fusion-space-1;
            }
        }
    }

    &_line {
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        border: 1px solid var(--bs-border-color);
        border-radius: $fusion-border-radius-md;
        padding: $fusion-space-4;
        margin-bottom: $fusion-space-3;
        cursor: pointer;
        transition: all $fusion-transition-base;
        position: relative;

        &:hover {
            border-color: var(--fusion-bank-accent);
            box-shadow: $fusion-shadow-md;
        }

        &.o_fusion_selected {
            border-color: var(--fusion-bank-accent);
            background: var(--fusion-bank-accent-bg);
        }

        &_header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: $fusion-space-2;

            .o_fusion_amount {
                font-size: $fusion-font-size-lg;
                font-weight: $fusion-font-weight-semibold;
                color: var(--bs-emphasis-color);

                &.negative { color: var(--fusion-confidence-low); }
            }

            .o_fusion_date {
                font-size: $fusion-font-size-sm;
                color: var(--bs-secondary-color);
            }
        }

        &_body {
            font-size: $fusion-font-size-sm;
            color: var(--bs-secondary-color);

            .o_fusion_partner {
                font-weight: $fusion-font-weight-medium;
                color: var(--bs-emphasis-color);
                margin-right: $fusion-space-2;
            }

            .o_fusion_memo {
                font-style: italic;
                color: var(--bs-tertiary-color);
            }
        }

        .o_fusion_attachments_badge {
            position: absolute;
            top: $fusion-space-2;
            right: $fusion-space-2;
            background: var(--bs-tertiary-bg);
            border-radius: $fusion-border-radius;
            padding: $fusion-space-1 $fusion-space-2;
            font-size: $fusion-font-size-xs;
            color: var(--bs-secondary-color);
        }
    }

    &_detail {
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        border-left: 1px solid var(--bs-border-color);
        padding: $fusion-space-6;

        h2 {
            font-size: $fusion-font-size-lg;
            font-weight: $fusion-font-weight-semibold;
            margin: 0 0 $fusion-space-4;
            color: var(--bs-emphasis-color);
        }
    }

    .btn_fusion {
        padding: $fusion-space-2 $fusion-space-4;
        border-radius: $fusion-border-radius;
        font-size: $fusion-font-size-sm;
        font-weight: $fusion-font-weight-medium;
        border: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        cursor: pointer;
        transition: all $fusion-transition-fast;

        &:hover { background: var(--bs-tertiary-bg); }

        &.btn_fusion_primary {
            background: var(--fusion-bank-accent);
            border-color: var(--fusion-bank-accent);
            color: #ffffff;

            &:hover {
                background: var(--fusion-bank-accent-hover);
                border-color: var(--fusion-bank-accent-hover);
            }
        }
    }
}