Odoo-Modules/fusion_accounting_ai/static/src/scss/dashboard.scss

.fusion_accounting_dashboard {
    display: flex;
    flex-direction: column;
    height: 100%;

    .fusion_dashboard_header {
        border-bottom: 1px solid var(--o-border-color);
        background: var(--o-view-background-color);
        flex-shrink: 0;
    }

    // ================================================================
    // Main two-column layout
    // ================================================================
    .fusion_main_layout {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    // Left panel — padding matches right panel so both columns align
    .fusion_left_panel {
        width: 50%;
        min-width: 400px;
        max-width: 600px;
        overflow-y: auto;
        flex-shrink: 0;
        padding: 0.75rem !important;
    }

    // Right panel
    .fusion_right_panel {
        flex: 1;
        min-width: 500px;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding: 0.75rem 0.75rem 0.75rem 0;

        .fusion_chat_panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            border: 1px solid #dee2e6;
            border-radius: 0.75rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            min-height: 0;
            height: auto !important;
            overflow: hidden;

            html[data-color-scheme="dark"] &,
            body.o_dark & {
                border-color: rgba(255, 255, 255, 0.12);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            }

            .card-header {
                flex-shrink: 0;
                border-radius: 0.75rem 0.75rem 0 0;
            }

            .fusion_chat_messages {
                max-height: none !important;
                min-height: 0 !important;
                flex: 1;
                overflow-y: auto;
            }

            .fusion_chat_input {
                flex-shrink: 0;
                border-radius: 0 0 0.75rem 0.75rem;
            }
        }
    }

    // ================================================================
    // Health Cards — modern rounded design
    // ================================================================
    .fusion_health_cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        flex-shrink: 0;
    }

    .fusion_health_card {
        border-radius: 0.75rem;
        padding: 1rem;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border: 1px solid #dee2e6;
        background: var(--o-view-background-color, #fff);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        }

        // Dark mode adjustments
        html[data-color-scheme="dark"] &,
        body.o_dark & {
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            &:hover {
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            }
        }

        .fusion_card_icon {
            width: 28px;
            height: 28px;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            flex-shrink: 0;
        }

        .fusion_card_title {
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: var(--bs-secondary-color, #6c757d);
        }

        .fusion_card_metric {
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 0.15rem;
        }

        .fusion_card_sub {
            font-size: 0.75rem;
            color: var(--bs-secondary-color, #6c757d);
        }

        // Status-based left border + icon colour
        &.fusion_card_green {
            border-left: 3px solid var(--bs-success);
            .fusion_card_icon { background: rgba(var(--bs-success-rgb), 0.12); color: var(--bs-success); }
        }
        &.fusion_card_yellow {
            border-left: 3px solid var(--bs-warning);
            .fusion_card_icon { background: rgba(var(--bs-warning-rgb), 0.15); color: var(--bs-warning); }
        }
        &.fusion_card_red {
            border-left: 3px solid var(--bs-danger);
            .fusion_card_icon { background: rgba(var(--bs-danger-rgb), 0.12); color: var(--bs-danger); }
        }
        &.fusion_card_blue {
            border-left: 3px solid var(--bs-info);
            .fusion_card_icon { background: rgba(var(--bs-info-rgb), 0.12); color: var(--bs-info); }
        }
    }

    // ================================================================
    // Needs Attention panel
    // ================================================================
    .fusion_attention_panel {
        background: var(--o-view-background-color, #fff);
        border: 1px solid #dee2e6;
        border-radius: 0.75rem;
        padding: 0.75rem;
        min-height: 150px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

        html[data-color-scheme="dark"] &,
        body.o_dark & {
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
    }

    .fusion_attention_item {
        transition: background 0.15s ease;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);

        &:last-child { border-bottom: none; }

        &:hover {
            background: rgba(0, 0, 0, 0.03);
        }

        html[data-color-scheme="dark"] &,
        body.o_dark & {
            border-bottom-color: rgba(255, 255, 255, 0.06);
            &:hover { background: rgba(255, 255, 255, 0.04); }
        }
    }

    .fusion_attn_dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 5px;

        &.fusion_attn_danger { background: var(--bs-danger); }
        &.fusion_attn_warning { background: var(--bs-warning); }
        &.fusion_attn_info { background: var(--bs-info); }
        &.fusion_attn_muted { background: var(--bs-secondary); }
    }
}

// Full height in Odoo's action container
.o_action_manager {
    .o_action.fusion_accounting_dashboard {
        height: 100%;
    }
}