Odoo-Modules/fusion_accounting_bank_rec/static/src/scss/bank_reconciliation.scss

@import "variables";

// ============================================================
// Bank reconciliation kanban container
// ============================================================
.o_fusion_bank_rec {
    background: $fusion-color-bg-secondary;
    min-height: 100vh;
    font-family: $fusion-font-family;
    color: $fusion-color-text-primary;

    // Header bar with stats
    &_header {
        background: $fusion-color-bg-primary;
        border-bottom: 1px solid $fusion-color-border;
        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;
        }

        .o_fusion_stats {
            display: flex;
            gap: $fusion-space-6;
            font-size: $fusion-font-size-sm;
            color: $fusion-color-text-secondary;

            .stat-value {
                font-weight: $fusion-font-weight-semibold;
                color: $fusion-color-text-primary;
                margin-left: $fusion-space-1;
            }
        }
    }

    // Statement line cards (kanban tile)
    &_line {
        background: $fusion-color-bg-primary;
        border: 1px solid $fusion-color-border;
        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: $fusion-color-accent;
            box-shadow: $fusion-shadow-md;
        }

        &.o_fusion_selected {
            border-color: $fusion-color-accent;
            background: $fusion-color-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;

                &.negative {
                    color: $fusion-confidence-low;
                }
            }

            .o_fusion_date {
                font-size: $fusion-font-size-sm;
                color: $fusion-color-text-secondary;
            }
        }

        &_body {
            font-size: $fusion-font-size-sm;
            color: $fusion-color-text-secondary;

            .o_fusion_partner {
                font-weight: $fusion-font-weight-medium;
                color: $fusion-color-text-primary;
                margin-right: $fusion-space-2;
            }

            .o_fusion_memo {
                font-style: italic;
                color: $fusion-color-text-muted;
            }
        }

        // Attachment count badge
        .o_fusion_attachments_badge {
            position: absolute;
            top: $fusion-space-2;
            right: $fusion-space-2;
            background: $fusion-color-bg-tertiary;
            border-radius: $fusion-border-radius;
            padding: $fusion-space-1 $fusion-space-2;
            font-size: $fusion-font-size-xs;
            color: $fusion-color-text-secondary;
        }
    }

    // Detail/edit panel (right side)
    &_detail {
        background: $fusion-color-bg-primary;
        border-left: 1px solid $fusion-color-border;
        padding: $fusion-space-6;

        h2 {
            font-size: $fusion-font-size-lg;
            font-weight: $fusion-font-weight-semibold;
            margin: 0 0 $fusion-space-4;
        }
    }

    // Action buttons
    .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 $fusion-color-border;
        background: $fusion-color-bg-primary;
        color: $fusion-color-text-primary;
        cursor: pointer;
        transition: all $fusion-transition-fast;

        &:hover {
            background: $fusion-color-bg-tertiary;
        }

        &.btn_fusion_primary {
            background: $fusion-color-accent;
            border-color: $fusion-color-accent;
            color: $fusion-color-text-inverse;

            &:hover {
                background: $fusion-color-accent-hover;
                border-color: $fusion-color-accent-hover;
            }
        }
    }
}